fire-mh/src/components/pie/index5.vue

<template>
      <div
        ref="echartD"
        style="width:100%;height:100%;"
      ></div>
  </template>
  <script>
  export default {
    props: {
        dataMap: Object
    },
    data() {
      return {
        data:[]
      };
    },

    watch: {
        dataMap(val,old){
          console.log(val)
            this.getData(val)
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
      getData(data = this.dataMap) {
        console.log(data)
        let that = this
        let echartsMap = this.$echarts.getInstanceByDom(this.$refs.echartD);
        if (echartsMap == null) {
            echartsMap = this.$echarts.init(this.$refs.echartD);
        }
         let colorList = [
                '#b72727',
           '#c3a102',
           '#3f8a3f',
           '#009b8a',
          ]
        for(let i=0;i<data.length;i++){
          data[i].label = {
                  color: colorList[i]
          }
        }
        let option = {
          color: [
           '#b72727',
           '#c3a102',
           '#3f8a3f',
           '#009b8a',
          ],
          legend: {
            // icon:'rect',
            itemWidth: 20,
            // orient: 'vertical',
            bottom: 0,
            textStyle: {
              show: true,
              color: "#fff",
              fontSize: "0.175rem",
              fontFamily: "syhtN",
              width: this.isVs ? 0 : 85,
              overflow: "truncate",
            },
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: [40, 80],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'outer',
                    fontSize: "0.175rem",
                    lineHeight:18,
                    align: "bottom",
                    color:"#fff",
                    formatter: function (data) { //指示线对应文字，说明文字
                      return `${data.data.name}\n${data.data.value}`;
                    },
                    
                    textStyle: {
                      fontSize: 14,
                    },
                  },
                  labelLine: { //指示线状态
                    show: true,
                    length: 10,
                    length2: 10,
                    position:"bottom"
                  }
                }
              },
              data:data
            }
          ]
        };
       
        echartsMap.setOption(option);
        option && echartsMap.setOption(option);
        setTimeout(function () {
          window.onresize = function () {
            echartsMap.resize();
          };
        }, 200);
      },
    },
  };
  </script>