<template>

  <div class="project-total-chart" v-if="show">
    
       <div id="total-scenario" class="chart-content" :style="{ width }"></div>
        <div id="total-type" class="chart-content" :style="{ width }"></div>
        <div id="total-client" class="chart-content" :style="{ width }"></div>
        <div id="total-create" class="chart-content" :style="{ width }"></div>
</div>
  
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      show: false,
      fullWidth: document.documentElement.clientWidth,
      width: 0
    }
  },
  created(){
    window.addEventListener('resize', this.handleResize)
  },
  watch: {
    fullWidth() {
      this.refresh()
    }
  },
  mounted() {
  },
  methods: {
    handleResize(event) {
      this.fullWidth = document.documentElement.clientWidth
    },
    refresh() {
      this.show = true
      this.width = (this.fullWidth / 4) - 10 + 'px'
      this.$nextTick(() => {
        this.initChart1(this.chartData.scenario, 'scenario','应用场景')
        this.initChart1(this.chartData.type, 'type','调查类型')
        this.initChart1(this.chartData.client, 'client','委托方')
        this.initChart1(this.chartData.create, 'create','创建月份')
      })
    },
    initData(data) {
      this.chartData = data
      this.refresh()
    },
    initChart(id) {
      const chartDom = document.getElementById(`total-${id}`);
      return this.$echarts.init(chartDom);
    },
    initChart1(data, key,name) {
      this.initChart(key).setOption(key === 'create' ? {
        xAxis: {
          type: 'category',
          data: Object.keys(data).map(key => key)
        },
        yAxis: {
          type: 'value'
        },
           title: {
    text: name,
   bottom:0,
    left: 'center',
    textStyle:{
      fontSize:14,
      fontWeight:100,
      fontFamily:'宋体'
    }
  },
        series: [
          {
            data: Object.keys(data).map(key => data[key]),
            type: 'line'
          }
        ]
      } : {
        tooltip: {
          trigger: 'item'
        },
        title: {
    text: name,
   bottom:0,
    left: 'center',
    textStyle:{
      fontSize:14,
      fontWeight:100,
      fontFamily:'宋体'
    }
  },
        series: [{
          name: '',
          label: {
            show: false,
            position: 'center'
          },
         
          type: 'pie',
          radius: key === 'client' ? '70%' : ['40%', '70%'],
          data: Object.keys(data).map(key => { return { value: data[key], name: key } })
        }]
      })
    }
  }
}
</script>

<style lang="scss">
.project-total-chart {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .chart-content {
    display: inline-block;
    height: 250px;
  }
  .name{
    display: inline-block;
  }
}
</style>