echarts 图表颜色设置，饼图颜色渐变

电脑版发表于：2024/3/16 11:05

[TOC]

#### echarts 图表颜色设置

在外层加一个color数组就行了
```
color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272"],
```
color数组在顶层位置的
```
option = {
    title: {
        text: '消息来源',
        subtext: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
	// 这里设置
    color:["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272"],
    series: [{}{}]
...
```


#### echarts饼图颜色渐变代码如下：
```
series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '50%'],
            center: ['30%', '50%'],
            top: 50,
            itemStyle: {
                normal: {
                    color: (list) => {
                      // 这里设置颜色与渐变色，注意 ！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
                      var colorList = [
                        {
                            colorStart:'#488BFF',
                            colorEnd:'#9abffd'
                        },
                        {
                            colorStart:'#26CEBA',
                            colorEnd:'#8efaed'
                        },
                        {
                            colorStart:'#FFC069',
                            colorEnd:'#fadfba'
                        },
                        {
                            colorStart:' #FD6865',
                            colorEnd:'#f8b2b1'
                        }
                      ]
                      return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
                          offset: 0,
                          color: colorList[list.dataIndex]['colorStart']
                      }, {
                          offset: 1,
                          color: colorList[list.dataIndex]['colorEnd']
                      }])
                    }
                }
            },
            data: [
              { value: 335, name: '苹果' },
              { value: 310, name: '三星' },
              { value: 234, name: '香蕉' },
              { value: 135, name: '西瓜' }
            ]
          }
        ]
```
##### 更多颜色搭配
```
itemStyle: {
normal: {
  color: (list) => {
    // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
    var colorList = [
      {
        colorStart: '#488BFF',
        colorEnd: '#9abffd'
      },
      {
        colorStart: '#26CEBA',
        colorEnd: '#8efaed'
      },
      {
        colorStart: '#FFC069',
        colorEnd: '#fadfba'
      },
      {
        colorStart: '#FD6865',
        colorEnd: '#f8b2b1'
      },
      {
        colorStart: '#bdc2e8',
        colorEnd: '#e6dee9'
      },
      {
        colorStart: '#faada6',
        colorEnd: '#f5efef'
      },
      {
        colorStart: '#ef025e',
        colorEnd: '#ef025e'
      },
      {
        colorStart: '#a7876d',
        colorEnd: '#bdc0a8'
      },
      {
        colorStart: '#a6bce8',
        colorEnd: '#a6bce8'
      },
      {
        colorStart: '#6dc1f1',
        colorEnd: '#bcf1f2'
      },
      {
        colorStart: '#55abc1',
        colorEnd: '#77cbb1'
      }
    ]
    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ // 左、下、右、上
      offset: 0,
      color: colorList[list.dataIndex]['colorStart']
    }, {
      offset: 1,
      color: colorList[list.dataIndex]['colorEnd']
    }])
  }
}
```

#### 温柔梦幻的渐变配色
```
#feada6-->#f5efef
#a8edea-->#fed6e3
#bdc2e8-->#e6dee9
#a1c4fd-->#c2e9fb
#E3FDF5-->#FFE6FA
#fddb92-->#d1fdff
#fff1eb-->#ace0f9
#e9defa-->#fbfcdb
```

TeachingNote

echarts 图表颜色设置，饼图颜色渐变

{{item.title}}