Echarts柱形图颜色设置

ECharts图为每个数据项配置颜色

(2014-11-12 15:52:53)

转载

标签:

时尚

分类: 开发学习

其实给每个数据项配置很简单

只需要在series里面给data数组的每个元素设置itemSytle就可以了

option如下:

option = {

title : {

text: ‘高架排队情况‘

},

tooltip : {

trigger: ‘axis‘

},

xAxis : [

{

type : ‘value‘,

axisLabel : {

formatter: ‘{value} 米‘

}

}

],

yAxis : [

{

type : ‘category‘,

data : [‘未知‘,‘畅通‘,‘拥挤‘,‘堵塞‘]

}

],

series : [

{

type:‘bar‘,

data:[

{

value:200,

itemStyle:{

normal:{color:‘gray‘}

}

},

{

value:300,

itemStyle:{

normal:{color:‘green‘}

}

},

{

value:1500,

itemStyle:{

normal:{color:‘yellow‘}

}

},

{

value:300,

itemStyle:{

normal:{color:‘red‘}

}

}

]

}

]

};

时间: 2024-07-28 20:15:04

Echarts柱形图颜色设置的相关文章

echarts柱状图颜色设置:echarts柱状图如何设置不同颜色?(代码)

xAxis : [             {                 type : 'category', //                 name:'额度', //这是设置的false,就不不显示下方的x轴,默认是true的                 show: false, //这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个                 data : ['最多','平均','最少'],                 axisL

Echarts字体和线条颜色设置操作笔记

这篇文章主要讲述Echarts设置字体和线条的颜色相关操作笔记,希望文章对你有所帮助,主要是自己的在线笔记吧.我在前面先放各种修改前后图片颜色的对照,后面再详细介绍代码.这样更方便阅读及读者知道,是否对自己有所帮助,其重点是如何在模板动态网页或JSP网站中插入Echarts图片.        1.修改标题及背景颜色    2.设置柱形图颜色 3.修改坐标轴字体颜色        4.设置Legend颜色 5.修改折线颜色    6.修改油表盘字体大小及颜色 7.柱状图文本鼠标浮动上的颜色设置

echarts颜色设置、配色

echarts的颜色设置可以登录官网的主题定制工具 http://echarts.baidu.com/theme-builder/ 下载对应的js文件,引入HTML,并在初始化echarts图像时,指定主题名称. 例如 <!-- ECharts--> <script src="/static/vendors/echarts/echarts.min.js"></script> <script src="/static/vendors/e

ECHARTS柱形图和饼图数值显示

ECHARTS柱形图和饼图数值显示,官方文档写的很不错,这里自己单独梳理一下,以后可能会用的到. 1.柱形图数值显示 在option添加: label:{ normal:{ show: true, position: 'top'} }, 其中position为数值显示的位置,具体属性可以查看官方的配置项. 2.饼图 在option中series添加: itemStyle:{ normal:{ label:{ show: true, formatter: '{b} : {c} ({d}%)', t

echarts图例颜色与地图底色

本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些style 2.地图数据的获取以及Series的加载和其他没有什么大的差异.地图数据都在map.js中,都可以自己看,也可以自己根据格式获取响应的数据. 这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题. 1.图例的颜色代码 refresh: function (newOption) { if (newOpti

[转]保护眼睛的Windows和IE、Firefox、谷歌等浏览器颜色设置

保护眼睛的Windows和IE.Firefox.谷歌等浏览器颜色设置  长时间在电脑前工作,窗口和网页上的白色十分刺眼,眼睛很容易疲劳,也容易引起头痛,其实我们可以通过设置Windows窗口和软件的颜色设置保护自己的眼睛,总结网上的设置,自己觉得下面是最优的颜色设置方案.眼科专家建议保护眼睛的颜色为:色调:85,饱和度:123,亮度:205.这个颜色就是柔和的豆沙绿色,这个颜色看着眼睛不会那么疲劳. Windows眼睛保护色设置步骤: 右击"桌面"-->"属性"

android中的颜色设置

1.在android中经常看到设置的颜色为八位的十六进制的颜色值,例如: 1 2 3 public static final class color {     public static final int lightblue=0x7f040000; } 或者在Java中tx.setTextColor(0xffff00f); 说明: 0xffff00ff是int类型的数据,分组一下0x|ff|ff00ff,0x表示颜色整数的标记,ff表示透明度,f00f表示色值,注意:0x后面ffff00ff

关于border边框重叠颜色设置问题

盒子模型包括:margin border padding content 在标准盒子模型中 conten不包括border和padding  就是他自身内容所包含的区域. 在IE盒子模型中    content包括border和padding   是内容和border padding之和. 关于盒子边框重叠颜色设置问题: //就拿下列标签来说 <ul> <li class="on">房产</li> <li>家居</li> &l

scale相关设置—颜色设置

颜色设置,在R的可视化中,应该算是相对比较重要的一项内容,如何把握颜色,很大程度上影响图形的展现效果. 在ggplot的scale设置中,颜色相关的函数较多: scale_fill/colour_hue(..., h = c(0, 360) + 15, c = 100, l = 65, h.start = 0, direction = 1, na.value = "grey50") scale_colour_discrete 与scale_fill/colour_hue的普通参数部分是