颜色渐变，颜色搭配

电脑版发表于：2024/3/18 15:50

[TOC]

#### 先看看一组echarts里边的颜色渐变搭配
```
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']
                      }])
                    }
                }
            },
```
#### 温柔梦幻的渐变配色：
```
#feada6-->#f5efef
#a8edea-->#fed6e3
#bdc2e8-->#e6dee9
#a1c4fd-->#c2e9fb
#E3FDF5-->#FFE6FA
#fddb92-->#d1fdff
#fff1eb-->#ace0f9
#e9defa-->#fbfcdb
```
参考：https://mbd.baidu.com/newspage/data/dtlandingsuper?nid=dt_5271229585303051186


#### echarts更多颜色搭配：
```
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']
    }])
  }
}
```

只若初见

颜色渐变，颜色搭配

{{item.title}}