怎么让echarts柱状图同一个系列每个柱状颜色都不同
2017-09-01 16:26
579 查看
由于是让同一个系列中,所以要在系列配置中做文章,翻看echarts的api,有个color配置项,但配置项的值是一个颜色值,并不是数组,这可怎么办?经过网上搜索,返回color配置项可以配置一个函数,这个函数随机返回一个颜色值。完美解决。
配置项代码如下:
option = {
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200],
itemStyle:{
normal:{
color:function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
}
}
}
]
};
配置项代码如下:
option = {
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[10, 52, 200],
itemStyle:{
normal:{
color:function(params) {
// build a color map as your need.
var colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
'#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
'#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
}
}
}
]
};
相关文章推荐
- echarts柱状图每个柱子显示不同颜色,并且能够实现点击每种颜色影藏对应柱子的功能
- 介绍一篇“让echarts柱状图的每个柱子显示不同的颜色”的好博客
- Echarts柱状图的每个柱子显示不同颜色问题
- echarts柱状图,改变柱状颜色
- Highcharts做柱状图怎样样每个柱子都是不同的颜色显示
- echarts给柱形图的每个柱子设置不同颜色
- echarts+ajax+json动态生成多个不同随机颜色的柱状图
- echarts 使用不同颜色区分柱状图的值
- echarts如何给柱形图的每个柱子设置不同颜色
- echarts柱状图,改变柱状颜色
- Highcharts做柱状图怎样样每个柱子都是不同的颜色显示
- Echarts(一)一组不同颜色的柱状图
- echarts 迁徙图怎么设置不同颜色
- hdu6035 Colorful Tree 树形dp 给定一棵树,每个节点有一个颜色值。定义每条路径的值为经过的节点的不同颜色数。求所有路径的值和。
- echarts如何给柱形图的每个柱子设置不同颜色
- echarts如何给柱形图的每个柱子设置不同颜色
- echarts柱状图不同颜色与显示数值
- c#怎么实现chart柱状图的不同颜色
- JFreeChart柱状图单组柱子的不同颜色显示
- 有n个数(两两不同),对于这n个数的每个连续子序列,把其中最大的一个数标记一次,问最后每个数被标记次数