ldar/ui/src/views/statistics/pie/pflPieChart.vue

<template>
  <div id="pflPieChart" :style="{height:height,width:width}"/>
</template>

<script>
export default {
  name: "pflPieChart",
  props: {
    pointList: {
      type: Array,
      default() {
        return [];
      }
    },
    plantName: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '490px'
    },
  },
  data() {
    return {
      chart: null,
      option: {
        title: {
          text: '排放量',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: []
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            magicType: {
              show: true,
              type: ['funnel']
            },
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            label: {
              formatter: '{b}: ({d}%)'
            },
            name: '排放量',
            type: 'pie',
            radius: ['40%', '60%'],
            selectedMode: 'single',
            data: [],
            emphasis: {
              label: {
                show: true,
                fontSize: '21',
                fontWeight: 'bold'
              }
            },
          }
        ]
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      for (let i = 0; i < this.pointList.length; i++) {
        if (this.plantName != '合计' && this.plantName == this.pointList[i].plantName) {
          this.option.legend.data[i] = this.pointList[i].pointType
          this.option.series[0].data[i] = {value: this.pointList[i].pfl, name: this.pointList[i].pointType}
        } else if (this.plantName == '合计'||this.plantName ==''){
          this.option.legend.data[i] = this.pointList[i].pointType
          this.option.series[0].data[i] = {value: this.pointList[i].pfl, name: this.pointList[i].pointType}
        }
      }
      this.initChart();
    })
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('pflPieChart'))
      this.chart.setOption(this.option)
    },
  }
}
</script>

<style scoped>

</style>