ECharts图表中修改每个category的颜色 - CSDN博客
ECharts图表中修改每个category的颜色
要修改每个类别的显示颜色，需要给每个数据项配置
具体方法为：在series里面给data数组的每个元素设置itemSytle就可以了
var myTestCharts = echarts.init(document.getElementById('myTest'));
option如下：
myOption = {
text: '场馆内各类人数量'
tooltip : {
trigger: 'axis'
type : 'value',
axisLabel : {
formatter: '{value} 人'
type : 'category',
data : ['男人','女人','老人','小孩']
series : [
type:'bar',
itemStyle:{
normal:{color:'blue'}
itemStyle:{
normal:{color:'purple'}
itemStyle:{
normal:{color:'yellow'}
itemStyle:{
normal:{color:'red'}
将图表显示出来：
myTestCharts.setOption(myOption)
本文已收录于以下专栏：
相关文章推荐
legend是echarts中的图例
图例内容数组，数组项通常为{string}，每一项代表一个系列...
通过data:[
{name:’南宁-曼芭’,icon:’rect’},{name:’桂林-曼芭’,}，{name:’南宁-甲米’,}],//分别修改legend格式 ，缺省则为默认
1.默认leg...
定义color数组，对应图例即可。
color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'],
//手动设置每个图例的颜色
legend:...
ECharts 设置折线颜色只需要设置lineStyle的color即可,
设置小圆点颜色只需要设置itemStyle的颜色即可.series: [{
mytextStyle={
color:&#333&,//文字颜色
fontStyle:&normal&,//italic斜体
oblique倾斜
fontWeight:&n...
Echarts使用心得总结（二）
前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之...
ECharts使用心得
上周项目组要临时给客户做一个演示的原型，首页设计的是一个中国地图，本来打算用谷歌的地图，但是，做出来之后，整体的效果看起来太差了，最后就在网上搜相关的地图呈现的控件，...
// 全图默认背景
// backgroundColor: ‘rgba(0,0,0,0)’,
// 默认色板
color: ['#ff7f50','#87cefa','#da7...
// 全图默认背景
// backgroundColor: ‘rgba(0,0,0,0)’,// 默认色板
color: ['#ff7f50','#87cefa...
ECharts主页：  /index.html
ECharts-2.1.8下载地址：  /buil...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。1，定制显示
option = {
text: '某地区降水量',
subtext: '纯属虚构'
tooltip: {
trigger: 'axis'
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
splitLine: {
show: false
axisTick: {
alignWithLabel: true
type: 'value',
splitLine: {
show: false
splitArea: {
show: true,
series: [{
name: '降水量',
type: 'bar',
show: true,
position: 'top'
itemStyle: {
// 随机显示
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
// 定制显示（按顺序）
color: function(params) {
var colorList = ['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3', '#B74AE5','#0AAF9F','#E89589','#16A085','#4A235A','#C39BD3 ','#F9E79F','#BA4A00','#ECF0F1','#616A6B','#EAF2F8','#4A235A','#3498DB' ];
return colorList[params.dataIndex]
data: [32.6, 25.9, 39.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 58.8, 16.0, 32.3],
2，随机显示（每次刷新結果不一樣）
阅读(...) 评论()请登录查看
Echarts 绘制南丁格尔图Echarts 可以自定义配置选项；Echarts 设置数据图形的样式可以从三个层级入手，分别是：全局、系列和数据。下面我们使用 Echarts 来实现如下的一个南丁格尔图：开始绘制南丁格尔图与绘制的图表样式不同，本节我们要绘制的是饼图（第一节是柱状图）。饼图是根据明显的扇形弧度的不同来表达不同类目的数据占据的总数的百分比。相比于柱状图，饼图的数据格式更加简单，它数值是一维的，无需给出类目。饼图不在直角坐标系上实现，自然也不需要 xAxis 和 yAxis。利用下述代码绘制出一个简单的饼图：myChart.setOption({
series : [
name: '访问来源',
type: 'pie',
radius: '55%',
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
})图形显示结果：ECharts 中的数据项既可以只设成数值，也可以设为一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见&data&文档。比如上述代码中的 data 属性值是一个包含&name&和&value&属性的对象，而不像第一节里那样每一项都是单个数值。ECharts 中的 饼图&也支持通过设置&roseType&显示成南丁格尔图，操作如下：roseType: 'angle'显示出的南丁格尔图通过半径表示数据的大小：Echarts 配置阴影建立好一个基本的南丁格尔图后，我们可以为其添加一些通用的样式，例如阴影、透明度、颜色、边框颜色、边框宽度等。Echarts 的这些样式通常都是在系列的 itemStyle 中设置的。下面来看看 Echarts 中阴影样式的配置：itemStyle: {
// 阴影的大小
shadowBlur: 200,
// 阴影水平方向上的偏移
shadowOffsetX: 0,
// 阴影垂直方向上的偏移
shadowOffsetY: 0,
// 阴影颜色
shadowColor: 'rgba(0, 0, 0, 0.5)'
}加上阴影后显示的效果如下：在 itemStyle 中有 normal 和 emphasis 两个选项，normal 选项显示的是正常展示下的样式，emphasis 是当鼠标 hover 时候的高亮样式。上述示例里使用的是 normal ，是在正常的样式下加阴影，如果想要配置为在鼠标 hover 的时候突出阴影，可以使用下述代码：itemStyle: {
emphasis: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}Echarts 设置深色背景和浅色标签接下来我们通过修改背景颜色和文本颜色来把上述实例的主题变为深色主题。因为背景色是全局的，所以直接在 option 下设置&backgroundColor 就可以了，具体操作如下：setOption({
backgroundColor: '#2c343c'
})背景色设置完成后，同样将文本的样式设置为全局的&textStyle，具体操作如下：setOption({
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
})如果不想设置全局的文本样式，也可以分别对每个系列进行设置，每个系列的文本设置在&label.normal.textStyle，操作如下：label: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}最后，我们将实例中的饼图的标签的视觉引导线的颜色设置为浅色，操作如下：labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}最终的饼图效果显示如下：注意：label 和 labelLine 的样式有 normal 和 emphasis 两个状态，这与 itemStyle 相同。Echarts 设置扇形的颜色我们还可以根据实际需要对饼图中扇形的颜色进行设置，同样，扇形颜色的设置是在 itemStyle 中，操作如下：itemStyle: {
// 设置扇形的颜色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}效果显示如下：现在已经很接近我们要实现的效果了，接下来我们来实现图形的层次感和空间感。ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现，操作如下：data: [{
value:400,
name:'搜索引擎',
itemStyle: {
color: '#c23531'
}, ...]其实我们可以使用一种更快捷的方式来体现明暗度的变化，即通过&visualMap&组件将数值的大小映射到明暗度，操作如下：visualMap: {
// 不显示 visualMap 组件，只用于明暗度的映射
show: false,
// 映射的最小值为 80
// 映射的最大值为 600
inRange: {
// 明暗度的范围是 0 到 1
colorLightness: [0, 1]
}我们得到的最终效果如下图所示：
意见反馈：
联系方式：
广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容