Echart颜色设置
最近在做的项目用到Echarts，由于客户对图表颜色的要求，找了很多资料，终于对柱状图，饼图，仪表盘图的颜色设置有了一个了解，供大家参考学习。
Echarts配置项手册：http://echarts.baidu.com/option.html#title
Echarts实例：http://echarts.baidu.com/demo.html#confidence-band
1. 饼状图(pie)
只要在option里加入color，就可以了，比如修改官网示例的颜色http://echarts.baidu.com/echarts2/doc/example/pie1.html，试验了一下，好像color要放在series之后，否则会报错。
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
],
color: ['rgb(239,219,200)','rgb(137,246,100)','rgb(155,314,203)','rgb(155,155,146)','rgb(111,222,100)']
};
2.仪表盘(gauge)
仪表盘的颜色要加在series里
series: [
{
name: '指标',
type: 'gauge',
detail: { formatter: '{value}%' },
data: [{ value: completeRate, name: '完成率' }],
axisLine: {
lineStyle: {
color: [[0.0, 'lime'], [0.2, 'red'], [0.8, 'green'], [1, 'blue']]
}
}
}
]
3.柱状图
柱状图颜色的设置也要放到series里，官网示例http://echarts.baidu.com/echarts2/doc/example/bar3.html
series : [
{
name:'2011年',
type:'bar',
data:[18203, 23489, 29034, 104970, 131744, 630230],
itemStyle:{ normal:{color:'rgb(200,210,99)'} }
},
{
name:'2012年',
type:'bar',
data:[19325, 23438, 31000, 121594, 134141, 681807],
itemStyle:{ normal:{color:'#079255'}}
}
]