tmr-admin/src/componentChart/PieChart.vue

<template>
  <div ref="chart"  style="width:100%;height:385px;"  />
</template>
<script>
import echarts from 'echarts'
import { GetDataByName } from '@/api/common'
import draggable from 'vuedraggable'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
require('echarts/theme/macarons')

export default {
  name: 'PieChart',
  props: {
    

    chartData: {
      type: Object,
      required: true
    },
    //   chartOpt: {
    //   type: Object,
    //   required: false
    // },
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler: function (chartData) {
        this.renderChart(chartData)
      }
    },
    // schema: {
    //   deep: true,
    //   handler: function () {
    //     this.renderChart(this.data)
    //   }
    // }
  },
  mounted() {
    this.renderChart(this.chartData)
    this.$on('resized', this.handleResize)
    window.addEventListener('resize', this.handleResize)
  },


  // created() {
  //   this.renderChart(this.chartData)
  // },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    renderChart(chartData) {
      const option =  {
        title: { text: 'Stacked Line' },
        tooltip: { trigger: 'axis' },
        legend: {   data:chartData.legendArr, right: 10, show: true, type: 'scroll' },
        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
        xAxis: [{ type: 'category',data:chartData.xAxisArr }],
        yAxis: [
          {type: 'value', name: 'kg'},
           
        ],
         series: function (e) {
             
              var serie = [
               {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: [
                    // { value: 1048, name: 'Search Engine' },
                    // { value: 735, name: 'Direct' },
                    // { value: 580, name: 'Email' },
                    // { value: 484, name: 'Union Ads' },
                    // { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ];
            for (var i = 0; i < chartData.xAxisArr.length; i++) {
              console.log(i)
               
                var item = {
                  name: chartData.legendArr[i],
                  value: chartData.dataArr[i],
                
                }
             

              serie[0].data.push(item);
            }


            console.log("饼图：",serie)

            return serie;
          }()
      
      }
      setTimeout(() => {
        if (!this.chart) {
          this.chart = echarts.init(this.$refs.chart, 'macarons')
        }
        this.chart.clear()
        this.chart.setOption(option)
        // if (this.chartOpt) {
        //   this.chart.setOption(this.chartOpt)
        // }
 
        this.chart.setOption(this.chartOpt)
       
      }, 0)
    }
  }
}
</script>