Echarts按照固定的颜色循环饼图颜色

Myth丶恋晨 2022-09-09 13:45 222阅读 0赞

当我们选取了一组颜色数组值，但是后台返回的数据长度不固定时，颜色不够用的情况下，会重复颜色，可以采用循环颜色去绘制饼图的颜色

option() { 
          if (this.data.length) { 
            let arr = this.data
            let color = ['#b5a045', '#ce7244', '#ff6666', '#ff3399', '#FFFF00', '#FF8C00','#ff99cc']
            return { 
              tooltip: { },
              series: [
                { 
                  z: 2,
                  type: 'pie',
                  center: ['50%', '50%'],
                  data: this.data,
                  minAngle: 10,
                  radius: ['40%', '50%'],
                  itemStyle: { 
                    normal: { 
                      borderColor: '#072673',
                      borderWidth: 1,
                      color: function (params) { 
                        let newColor = []
                        arr.forEach((item, index) => { 
                          newColor.push(color[index % 6])
                        })
                        return newColor[params.dataIndex]
                      }
                    }
                  },
                  labelLine: { 
                    length: 10,
                    length2: 80,
                    lineStyle: { 
                      color: 'white',
                      width: 1.5
                    }
                  },
                  label: { 
                    show: true,
                    position: 'outside',
                    color: 'white',
                    verticalAlign: 'bottom',
                    padding: [0, -75, 32, -75],
                    rich: { 
                      top: { 
                        align: 'center',
                        color: 'white'
                      },
                      bottom: { 
                        align: 'center',
                        padding: [0, 0, 10, 0],
                        color: 'white'
                      }
                    },
                    formatter: function (params) { 
                      if (params.data.fullname.length) { 
                        return '{top|' + params.name + '}\n' + '{top|(' + params.data.fullname + ')}'
                      } else { 
                        return '{bottom|' + params.name + '}'
                      }
                    }
                  }
                }
              ]
            }
          } else { 
            return { }
          }
        }

核心代码：

itemStyle: { 
    	normal: { 
    	 borderColor: '#072673',
    	 borderWidth: 1,
    	 color: function (params) { 
    	   let newColor = []
    	   arr.forEach((item, index) => { 
    	     newColor.push(color[index % 6])
    	   })
    	   return newColor[params.dataIndex]
    	 }
    	}
    }