echarts绘制环形图

<template>
  <div id="biaopie"></div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        timer:null,
        data: [{
            name: 'IC卡表',
            value: 0,
          },
          {
            name: 'NB表',
            value: 0,
          },
          {
            name: 'LORA表',
            value: 0,
          },
          {
            name: '超声波表',
            value: 0,
          }, {
            name: '机械表',
            value: 0,
          }
        ],
        lengList: ['IC卡表','NB表','LORA表','超声波表','机械表'],
        valueList: [0,0,0,0,0],
      }
    },
    mounted() {
      this.renderBarChart();
    },
    methods: {
      loadData() {
        clearInterval(this.timer);
        this.$axios.get("xxx").then(res => {
          let dataList = res.data.data
          this.data = dataList;
          this.renderBarChart();
        });
      },
      renderBarChart() {
        let that = this;
        let startAngle = 0;
        let flag = true; //正转 反转
        let dataList = [];
        this.lengList=[];
        this.valueList=[];
        for (var i = 0; i < that.data.length; i++) {
          that.lengList[i] = that.data[i].name;
          that.valueList[i] = that.data[i].value;

          dataList.push({ //数据环
            value: that.data[i].value,
            name: that.data[i].name,
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderColor: "#000539",
              borderWidth: 10,
            },
          });
        }

        let myChart = echarts.init(document.getElementById('biaopie'));

        let option = {
          tooltip: {
            formatter: "{b} : {c} </br> 占比 ：{d}%",
            textStyle: {
              color: '#ffffff',
              fontSize: 25,
            },
            backgroundColor: '#121b4d',
          },
          color: ['#4BB5F1', '#91cc75', '#73c0de', '#47EDF2', '#05F0A2'],
          legend: {
            show: true,
            type: "plain",
            orient: "vartical",
            top: "center",
            right: 0,
            data: that.lengList, //加载图例数据
            formatter: function(name) { //图例数据格式话  名称-值
              return ("{title|" + name + "}  {value|" + that.valueList[that.lengList.indexOf(name)] +  "}  {title|块}");
            },
            textStyle: {
              lineHeight: 60,
              rich: {
                title: {
                  fontSize: 22,
                  color: "rgb(208, 222, 238)",
                },
                value: {
                  fontSize: 22,
                  color: "rgb(44, 232, 232)",
                },
              },
            },
          },
          series: [{
            type: 'pie',
            animation: false,
            startAngle: startAngle,
            center: ['37%', '50%'],
            radius: ['50%', '70%'],
            encode: {
              tooltip: ['name', 'value'],
              value: 'value'
            },
            label: {
              show: false,
              formatter: function(params) {
                return params.value.name + ":" + params.value.value;
              }
            },
            emphasis: { //高亮状态的扇区和标签样式
              scale: true,
              scaleSize: 30,
            },
            data: dataList
          }],
          graphic: { //中心图片
            elements: [{
              type: 'image',
              z: 3,
              style: {
                image: require("xxx/biao.png"),
                width: 200,
                height: 200
              },
              left: '21%',
              top: 'center'
            }]
          }
        };

        myChart.setOption(option);

        this.timer=setInterval(()=》 {
          startAngle = flag ? startAngle + 2 : startAngle - 2;
          if (startAngle == 0) {
            flag = true;
          } else if (startAngle == 10000) {
            flag = false;
          }
          option.series[0].startAngle = startAngle;
          myChart.setOption(option);
        }, 100);
      }
    },
  }
</script>

<style scoped lang="scss">
  #biaopie {
    width: 100%;
    height: 100%;
    // background-color: #281e57;
  }
</style>

效果图：