hyyfScreen/src/views/Alarm/chart/CostPie.vue

<template>
  <div id="costPie" style="width: 100%; height: 100%;"></div>
</template>
<script>
export default {
  props: {
    pieData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let options = {
        grid: {
          x: 100
        },
        // legend: {
        //   top: '25%',
        //   left: '75%',
        //   orient: 'vertical',
        //   icon: "circle",
        //   selectedMode: false, // 取消右侧项选中
        //   itemGap: 20, // 各项间隔
        //   textStyle: {
        //     fontSize: 15,
        //     color: '#666'
        //   },
        // },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            radius: '70%', // 半径
            center: ['50%', '55%'],
            avoidLabelOverlap: false,
            labelLine: {
              show: true
            },
            itemStyle: {
              normal: {
                color: function (colors) { // 颜色设置
                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
                  return colorList[colors.dataIndex]
                },
                label: {
                  formatter: '{b}: {c}%'
                }
              },
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {c}%',
                  textStyle: {
                    fontSize: '15',
                  }
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
            },
            data: this.pieData
          }
        ]
      };

      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('costPie'));
    this.init()
  },
  watch: {
    data(value) {
      console.log('成本分析环形图数据', value)
      this.init()
    }
  }
}
</script>
<style scoped>
  #costPie {
    width: 100%;
    height: 100%;
  }
</style>>