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

<script>
export default {
  name: "ChartPie",
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let options = {
        // title: {
        //   text: '报警总量',
        //   x: 20,
        //   y: 20
        // },
        grid: {
          x: 100
        },
        tooltip: {
          trigger: 'item',
          formatter: function ({name, value, percent}) {
            return name + '：' + value + '头&nbsp;&nbsp;&nbsp;&nbsp;' + percent + '%'
          }
        },
        legend: {
          top: '25%',
          left: '55%',
          orient: 'vertical',
          icon: "circle",
          selectedMode: false, // 取消右侧项选中
          itemGap: 20, // 各项间隔
          textStyle: {
            fontSize: 15,
            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 },
            ]
            clientLabels.forEach(function (value, i) {
              if (value.name == name) {
                legendIndex = i;
              }
            });
            return name + " (" + clientLabels[legendIndex].percent + ', ' + clientLabels[legendIndex].number + '条' + ") ";
          }
        },
        graphic: [
          {
            type: 'text',
            left: '27%',
            top: '43%',
            style: {
              text: '报警总量',
              fontSize: 15,
              fill: 'rgb(192, 188, 189)'
            }
          },
          {
            type: 'text',
            left: '25%',
            top: '53%',
            style: {
              text: 100 + '条',
              fontSize: 22,
              fontWeight: 700
            }
          }
        ],
        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: [
              { value: 16, name: '环境报警' },
              { value: 16, name: '断电报警' },
              { value: 16, name: '人员违规' },
              { value: 16, name: '环境监测' },
              { value: 16, name: '污水排放' },
              { value: 16, name: '设备异常' },
            ]
          }
        ]
      };

      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>