关于Echarts饼图循环series里data

此处为效果图 根据接口返回的数据进行循环

第一步：先将需要循环的 series 置空 循环你想要的数组 (ps: 此处我的数组为 ytgsList)

 var myChart4 = echarts.init(this.$refs.myChart4)
      var series=[]
      for (var i=0,len=this.ytgsList.length;i

第二步：直接创建 此处 color 我使用的是渐变色 legend 的设置是为了显示上面数据下面昵称的需求

title 里是是在环形中央显示文字信息 series 里的 data 直接用上面循环里做的就好了

   var option = {
        tooltip: {trigger: 'item'},
        legend:{
          orient: 'horizontal',// 纵向排列
          align:'left',
          top:'20%',
          left:'70%',
          width:'130',
          itemWidth: 15,
          textStyle: {color: 'rgba(255,255,255,1)',
            width: 100,
            overflow: 'break',
          }
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: 'rgba(205, 255, 32, 1)' // 0% 处的颜色
            }, {offset: 1, color: 'rgba(1, 16, 23, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: 'rgba(1, 101, 254, 1)' // 0% 处的颜色
            }, {offset: 1, color: 'rgba(1, 16, 23, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: 'rgba(255, 224, 46, 1)' // 0% 处的颜色
            }, {offset: 1, color: 'rgba(1, 16, 23, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: 'rgba(1, 195, 241, 1)' // 0% 处的颜色
            }, {offset: 1, color: 'rgba(1, 16, 23, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{offset: 0, color: 'rgba(46, 229, 165, 1)' // 0% 处的颜色
            }, {offset: 1, color: 'rgba(1, 16, 23, 1)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },

        ],
        title: {
          left: '48.5%',
          top: 'center',
          text: `{topTitle|${this.ytgsListAllCount}}` + 'n' + 'n' + '业态总数',
          textAlign: 'center',
          textStyle: {
            // 富文本标签自定义
            rich: {
              topTitle: {
                color: '#41C1FF',
                fontWeight: '600',
                fontSize: 12
              }
            },
            fontSize: 11,
            width: 100,
            color: 'rgba(255, 255, 255, 1)'
          }
        },
        series:[
          {
            name: '个数',
            type: 'pie',
            radius: ['45%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {show: false},
            data:series
          },
        ]
      };

第三步：创建并设置其自适应窗口大小

 myChart4.setOption(option);
      window.addEventListener("resize", () => {if (this.$refs.myChart4) myChart4.resize();});

整体如下