关于Echarts饼图循环series里data

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

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

 var myChart4 = echarts.init(this.$refs.myChart4)
      var series=[]
      for (var i=0,len=this.ytgsList.length;i<len;i++){
        series.push({
         value:this.ytgsList[i].situationCount,
          name:`${this.ytgsList[i].situationCount}
${this.ytgsList[i].situationName}`
        })
      }复制

第二步：直接创建 此处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();
      });复制

整体如下