Echarts 柱状图、饼状图等变换颜色、渐变色

Echarts 柱状图、饼状图等变换颜色、渐变色

本文只总结了几种用到过的方法，当然，方法远不止这些。以下实测有效。之后如果遇到测试成功的方法，也会对文章进行更新。其中很多参数可以自行测试修改。
方法一：

itemStyle: {
    color:function(params) {
        var colorList = ['#c23531','#9BD4B9','#FFF384'];//这是一个颜色的数组
        return colorList[params.dataIndex]
    },
},

方法二：

 color: ['#c23531','#9BD4B9','#FFF384'],

方法三：（渐变）

itemStyle: {
    normal: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: 'red' },
        {offset: 1, color: 'blue' }], false)
     }
},

方法四：（渐变）

color: [{
    type: 'linear',
    x: 1,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
         { offset: 0, color: '#00CBD2' },
         { offset: 1, color: '#AAE9CB' }
    ]
}],

方法五：多项（渐变）

itemStyle: {
    color: function(params) {
        var colorList = [
            {
                c1: '#fce5ca',  
                c2: '#FF9D62'                                                                   
            },
            {
                c1: '#00CBD2',  
                c2: '#AAE9CB'
            },]
         return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
              offset: 0,
              color: colorList[params.dataIndex].c1
              }, {
              offset: 1,
              color: colorList[params.dataIndex].c2
              }])                                    
         }
 },

运用方法三和五可能会遇到如下问题

[Vue warn]: Error in v-on handler: “ReferenceError: echarts is not defined”
ReferenceError: echarts is not defined

加上这句话就好啦。

import echarts from ‘echarts’;