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} <br/>{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'}}
}
]

Echart颜色设置相关推荐

iOS开发技巧（系列十八：扩展UIColor，支持十六进制颜色设置）
新建一个Category,命名为UIColor+Hex,表示UIColor支持十六进制Hex颜色设置. UIColor+Hex.h文件, #import <UIKit/UIKit.h> # ...
R语言使用ggplot2包的快速可视化函数qplot绘制分组直方图（分组颜色设置）实战
R语言使用ggplot2包的快速可视化函数qplot绘制分组直方图(分组颜色设置)实战目录 R语言使用ggplot2包的快速可视化函数qplot绘制分组直方图(分组颜色设置)实战
eclipse java代码颜色设置颜色设置颜色设置颜色设置颜色_eclipse设置(颜色，字体等)...
1.设置jsp中js块的颜色: 选择Preferences菜单项.在弹出的窗口的左侧树形菜单依次选择:MyEclipse.Files and Editors.Javascript.Editor.Syn ...
windows cmd color颜色设置
上一篇我们讲了去模仿电影黑客的命令界面,其中有关于cmd命令行的颜色设置,下面就细说一下: 1.cmd进入命令 2.color+空格+? 系统会给与相关提示: 3.可以看出颜色是一个十六进制控制 ...
android 颜色资源文件,android中colors.xml颜色设置资源文件的方法
1. 打开res目录下的values文件夹,双击打开colors.xml文件进行编辑上代码 #008577 #00574B #D81B60 #ff0000 #0000ff 2. 在res目录下的la ...
【SeeMusic】音符方块颜色设置 ( 单一颜色设置 | 多彩音符设置 | 定时变色设置 | 渐变颜色 | 分轨道提示 )
SeeMusic 系列文章目录 [SeeMusic]下载安装并注册 SeeMusic 软件 [SeeMusic]购买付费版本 ( 进入购买页面 | 购买流程 ) [SeeMusic]创建 SeeMus ...
IOS开发之——颜色设置
颜色设置: 指定RGB,參数是:红.绿.黄.透明度,范围是0-1 + (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(C ...
计算机桌面颜色如何设置标准,电脑调整桌面颜色设置_电脑桌面颜色设置
2016-12-09 09:18:44 具体方法如下:1.鼠标点击桌面右键,属性2.打开显示属性圣话框,选择"外观"选项高级3.打开高级外观对话框,选择"项目" ...
Linux centos 主机名颜色设置和别名设置
方便和乐趣写今天.至于为什么主机名颜色设置和别名设置放在一起写.这是因为他们的设置是在一个文件中..bashrc. .bashrc放在cd /root 这个文件夹下! 这个文件主要保存个人的一些个 ...

Echart颜色设置

Echart颜色设置相关推荐

最新文章

热门文章