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

<template>
  <div id="chartPie" style="width: 100%; height: 100%;"></div>
</template>

<script>
export default {
  name: "ChartPie",
  data() {
    return {
      myChart: null
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if(newVal) {
          this.myChart.clear();
          this.init();
        }
      },
      deep: true
    }
  },
  methods: {
    init() {
      let arr = [];
      let num = 0;
      this.data.forEach(item => {
        num+=item.value
      })
      this.data.forEach(item => {
        arr.push({ name: item.name, percent: (parseFloat(item.value) / num * 100).toFixed(2) + '%', number: item.value})
      })
      let options = {
        grid: {
          x: 100
        },
        tooltip: {
          trigger: 'item',
          formatter: function ({name, value, percent}) {
            return name + '：' + value + '条&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
          }
        },
        legend: {
          top: '30%',
          left: '55%',
          orient: 'vertical',
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 30, // 各项间隔
          textStyle: {
            fontSize: 13,
            color: '#666'
          },
          formatter: function (name) {
            var legendIndex = 0;
            // var clientLabels = [
            //   { name: '环境报警', percent: parseFloat(0.16)*100 + '%', number: 2 },
            //   { name: '断电报警', percent:  parseFloat(0.16)*100 + '%', number: 2 },
            //   { name: '人员违规', percent:  parseFloat(0.16)*100 + '%', number: 2 },
            //   { name: '环境监测', percent:  parseFloat(0.16)*100 + '%', number: 2 },
            //   { name: '污水排放', percent:  parseFloat(0.16)*100 + '%', number: 2 },
            //   { name: '设备异常', percent:  parseFloat(0.16)*100 + '%', number: 2 },
            // ]
            var clientLabels = arr
            clientLabels.forEach(function (value, i) {
              if (value.name == name) {
                legendIndex = i;
              }
            });
            return name + " (" + clientLabels[legendIndex].percent + ', ' + clientLabels[legendIndex].number + '条' + ") ";
          }
        },
        graphic: [
          {
            type: 'text',
            left: '22%',
            top: '43%',
            style: {
              text: '报警总量',
              fontSize: 15,
              fill: 'rgb(192, 188, 189)'
            }
          },
          {
            type: 'text',
            left: '22%',
            top: '53%',
            style: {
              text: num + '条',
              fontSize: 22,
              fontWeight: 700,
              fill: 'rgb(192, 188, 189)'
            }
          }
        ],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '80%'], // 半径
            center: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              // position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function (colors) { // 颜色设置
                  var colorList = ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4']
                  return colorList[colors.dataIndex]
                },
                borderWidth: 5, // 设置各项空隙
                borderColor: '#fff'
              }
            },
            data: this.data
          }
        ]
      };

      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartPie'));
    this.init()
    let that = this;
    window.addEventListener("resize", function () {
      that.myChart.resize()
    })
  }
}
</script>

<style scoped>

</style>