echarts--四个圈饼图

let mychart = this.$echarts.init(document.getElementById('chart'))
       //过渡动画,转圈圈
      // mychart.showLoading({
    
    
      //   text: '数据正在加载...',
      //   textStyle: { fontSize: 30, color: '#444' },
      //   effectOption: { backgroundColor: 'rgba(0, 0, 0, 0)' }
      // });
      var data = [
        {
    
    
          name: '装备制造',
          value: 54
        }, {
    
    
          name: '现代材料',
          value: 44
        }, {
    
    
          name: '新能源',
          value: 35
        }, {
    
    
          name: '新一代信息技术',
          value: 30
        }]

      var titleArr = [], seriesArr = [];
      var colors = [['#389af4', '#dfeaff'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
      data.forEach(function (item, index) {
    
    
        titleArr.push(
          {
    
    
            text: item.name,
            // 标题位置
            left: (index + 0.5) * 24 + '%',
            top: '70%',
            textAlign: 'center',
            textStyle: {
    
    
              fontWeight: 'normal',
              fontSize: '12',
              color: colors[index][0],
              textAlign: 'center',
            },
          }
        );
        seriesArr.push(
          {
    
    
            name: item.name,
            type: 'pie',
            clockWise: false,
            radius: [40, 35],
            itemStyle: {
    
    
              normal: {
    
    
                // 占比颜色
                color: colors[index][0],
                shadowColor: colors[index][0],
                shadowBlur: 0,
                label: {
    
    
                  show: false
                },
                labelLine: {
    
    
                  show: false
                },
              }
            },
            hoverAnimation: false,
            // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            center: [(index + 0.6) * 24 + '%', '40%'],
            data: [{
    
    
              // 圆百分比内容
              value: item.value,
              label: {
    
    
                normal: {
    
    
                  formatter: function (params) {
    
    
                    return params.value + '%';
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
    
    
                    fontSize: '16',
                    fontWeight: 'normal',
                    //圆心数字颜色
                    color: colors[index][0]
                  }
                }
              },
            }, {
    
    
             // 占比计算
              value: 100 - item.value,
              name: 'invisible',
              itemStyle: {
    
    
                normal: {
    
    
                  color: colors[index][1]
                },
                emphasis: {
    
    
                  color: colors[index][1]
                }
              }
            }]
          }
        )
      });
      let option = {
    
    
        backgroundColor: "#fff",
        title: titleArr,
        series: seriesArr
      }

      // 模拟异步加载数据
      // setTimeout(function () {
    
    
      //   // 数据加载完成后隐藏加载动画
      //   mychart.hideLoading();

      //   // 更新图表数据
      //   mychart.setOption(option);
      // }, 2000);
      mychart.setOption(option)
      // 自适应屏幕
      window.addEventListener('resize', function () {
    
    
        mychart.resize()
      })

写在mounted中,效果