Echarts柱状图的每个柱子显示不同颜色问题
2017-05-19 10:15
891 查看
在使用Echarts制作柱状图的时候,通常在横轴每个标签只有一个柱子的时候,每个柱子的颜色都是一样的,如下图所示:
然而,很多时候我们为了使界面更加美观,通常会有使每个柱子颜色都不相同的需求。那么这时候,我们需要在itemStyle的normal状态下,首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量,则柱子会循环使用设定的颜色。
代码如下:
实现效果如图所示:
然而,很多时候我们为了使界面更加美观,通常会有使每个柱子颜色都不相同的需求。那么这时候,我们需要在itemStyle的normal状态下,首先根据柱子的数量设置一个颜色的数组。然后柱子会设定颜色。如果颜色数组少于柱子的数量,则柱子会循环使用设定的颜色。
代码如下:
itemStyle: { normal: { color: function(params) { //首先定义一个数组 var colorList = [ '#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589' ]; return colorList[params.dataIndex] }, //以下为是否显示 label: { show: false } } }
实现效果如图所示:
相关文章推荐
- 介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客
- echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
- Highcharts做柱状图怎样样每个柱子都是不同的颜色显示
- Highcharts做柱状图怎样样每个柱子都是不同的颜色显示
- 怎么让echarts柱状图同一个系列每个柱状颜色都不同
- JFreeChart柱状图单组柱子的不同颜色显示
- echarts如何给柱形图的每个柱子设置不同颜色
- echarts柱状图不同颜色与显示数值
- echarts给柱形图的每个柱子设置不同颜色
- echarts如何给柱形图的每个柱子设置不同颜色
- JFreeChart柱状图单组柱子的不同颜色显示
- JFreeChart柱状图单组柱子的不同颜色显示
- 如何让echarts柱状图的每个柱子显示不同的颜色
- JFreeChart柱状图单组柱子的不同颜色显示
- echarts如何给柱形图的每个柱子设置不同颜色
- Echarts之柱状图获取点击柱子事件&自定义柱子颜色&类目轴纵向排列
- Echarts柱状图,改变柱子的颜色,后台操作
- echarts折线图分段显示不同颜色
- echarts 柱状图 ,颜色和显示设置
- Echarts折线图不同X轴的对比功能,不同段不同颜色显示