dongxin/src/components3/xiaofangjiangkong/pie2.vue

<template>
  <el-row >
    <div
      id="index6"
      class="line"
      style="width:110%;height:260px;margin:-30px 0 0 40px;"
    ></div>
  </el-row>
</template>
<script>
import * as echarts from 'echarts';
export default {
  props: ["resData"],
  data() {
    return {
      data:[]
    };
  },

  watch: {
      resData(val,old){
      this.data = val
      this.getData()
    }
  },
  methods: {
    getData() {
      let total = this.data.pie[0].value + this.data.pie[1].value + this.data.pie[2].value + this.data.pie[3].value + this.data.pie[4].value
      let zaixianlv = this.data.zaixianlv
      let myChart = echarts.init(document.getElementById("index6"));
      let option = {
         color: [
            '#8082D6',
            '#FFC46D',
            '#E8684A',
            '#4EBA60',
            '#8082D6'
        ],
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '-10%',
          containLabel: true
        },
        title: {
          text: "",
          text: zaixianlv + '%',
          textStyle: {
            color: '#E6EFFF',
            fontSize: 25
          },
          subtext: '设备在线率',
          subtextStyle: {
            color: '#E6EFFF',
            fontSize: 14
          },
          itemGap: 10, // 主副标题距离
          left: 'center',
          top: '42%'
        },
        legend: {
          orient: 'vertical',
          itemHeight: 8,
          itemWidth: 8,
          left:'20%',
          data: [
            {
              name: this.data.pie[0].name,
              icon: 'circle',
            },
            {
              name: this.data.pie[1].name,
              icon: 'circle',
            },
            {
              name: this.data.pie[2].name,
              icon: 'circle',
            },
            {
              name: this.data.pie[3].name,
              icon: 'circle',
            },
            {
              name: this.data.pie[4].name,
              icon: 'circle',
            }
          ],
          top: '20%',
          left: 'left',
          textStyle: {
            color: "#FFF"
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '55%'],
            avoidLabelOverlap: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'outer',
                  fontSize: 18,
                  fontWeight: 'bold',
                  align: "left",
                  formatter: function (p) { //指示线对应文字，说明文字
                    return ((p.data.value/total) * 100).toFixed(2) + '%';
                  }
                },
                labelLine: { //指示线状态
                  show: true,
                  smooth: 0.8,
                  length: 4,
                  length2: 20
                }
              }
            },
            data: this.data.pie
          }
        ]
      };
      myChart.setOption(option);
      option && myChart.setOption(option);
      setTimeout(function () {
        window.onresize = function () {
          myChart.resize();
        };
      }, 200);
    },
  },
};
</script>