【Echarts第二篇】自定义柱状图的样式

以使用频率较高的颜色开始走起~！

一.自定义颜色

如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
官方文档给出的默认颜色列表为:

[’#c23531’,’#2f4554’, ‘#61a0a8’, ‘#d48265’, ‘#91c7ae’,’#749f83’, ‘#ca8622’, ‘#bda29a’,’#6e7074’, ‘#546570’, ‘#c4ccd3’]

但实际上默认取的是上述列表中的第一项’#c23531’，所以问题来了，说好的颜色循环呢？？？
这是因为，颜色循环针对的是不同的度量(图例代表的统计量)，有几种度量，就会循环几种颜色，以下图为例，只有一个度量-销量，所以默认只取了一种颜色。

对于颜色的设置，可以设置全局的颜色，也可以设置各个系列自己专属的颜色。

直接在Option中设置color的值，即表现为全局的颜色；
在Option的series配置项中设置color的值，即为对应系列专属的颜色；

1.设置全局颜色

以上图示例为起点，现在只需再增加几个度量，设置全局颜色时就可以指定需要循环显示的颜色啦~

第一步，增加图例

legend: {
                data:['销量','支出','收入']
            },

第二步, 增加度量数据

 series: [{
                name: '销量',
                type: 'bar',
                data: [30, 20, 36, 40, 50, 60],
        
            },
            {
                name: '支出',
                type: 'bar',
                data: [200, 310, 120, 320, 200, 100],
               
            },
            {
                name: '收入',
                type: 'bar',
                data: [100, 200, 600, 300, 400, 800],
               
            }
            ]

此处要注意: series中每个数据项都要写name(每个数据项对应的图例名称),否则会影响图例的展示

第三步,设置全局颜色

color: ['#66FF99','#FFFF00','#FF00FF']

效果如图;-)

2.设置各个系列的颜色

各个系列对应的样式分为普通样式和高亮样式(鼠标悬浮到图形元素上时图形颜色)

两种样式都在option配置项里的series中设置。

配置项写法因Echarts的版本而有所差异；

Echarts4.0+以上的版本的写法为:

series: {
        // 普通样式
        itemStyle: 
            color: 'red'
        },
        // 高亮样式
        emphasis: {
            itemStyle: {
                color: 'blue'
            }
        }
    }

在Echarts4以前，普通样式的写法：

series: {
        // 普通样式
        itemStyle: 
             normal: {
                color: 'red'
            },
        }
    }

对于版本差异，官方给出的建议是:“这种写法仍然被兼容，但是不再推荐”

通过对系列的普通样式的颜色设置，就算只有一种度量数据，也照样可以愉快的对每个柱子设置不同的颜色。比如实现如下效果：

关键步骤: itemStyle里自定义一个颜色列表，然后根据数组下标循环颜色就好了~(在这里遵循Echarts4.0+的语法写)

series: {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    let colorList = ['#00FFFF','#C0C0C0','#FFFF00','#66FF99','#000000','#FF0000']
                    return colorList[params.dataIndex]
                  }
                }
            },

对于高亮样式也是一样的道理啦~如果不特意指定高亮时的颜色，各系列的颜色会默认与普通样式一致。

高亮样式的写法:

 series: {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    let colorList = ['#00FFFF','#C0C0C0','#FFFF00','#66FF99','#000000','#FF0000']
                    return colorList[params.dataIndex]
                  }
                },
                emphasis: {
                   itemStyle: {
                  
              
                }
              }
             },

需要查看源码请移步我的github: Echarts-Demos

未完待续;-)(｀･ω･´)