ECharts 设置折线颜色

画折线图时，折线用默认主题太单调啦，而且过六个还重复！太丑了，不符合我审美！

怎么改变折线的颜色呢，其实很简单，代码如下：

在series里给每条折线加个itemStyle即可：

itemStyle: {normal: {color: '#a80000', //改变折线点的颜色lineStyle: {color: '#a80000' //改变折线颜色}}
},

完整代码为：

series: [{name: "意大利",type: 'line',data: a,itemStyle: {normal: {color: '#a80000', //改变折线点的颜色lineStyle: {color: '#a80000' //改变折线颜色}}},},{name: '巴西',type: 'line',data: b,itemStyle: {normal: {color: '#ff6f73', //改变折线点的颜色lineStyle: {color: '#ff6f73' //改变折线颜色}}},},{name: '西班牙',type: 'line',data: c,itemStyle: {normal: {color: '#ffa438', //改变折线点的颜色lineStyle: {color: '#ffa438' //改变折线颜色}}},},{name: '德国',type: 'line',data: d,itemStyle: {normal: {color: '#ffda42', //改变折线点的颜色lineStyle: {color: '#ffda42' //改变折线颜色}}},},{name: '英国',type: 'line',data: e,itemStyle: {normal: {color: '#db63c2', //改变折线点的颜色lineStyle: {color: '#db63c2' //改变折线颜色}}},},{name: '法国',type: 'line',data: f,itemStyle: {normal: {color: '#8763f3', //改变折线点的颜色lineStyle: {color: '#8763f3' //改变折线颜色}}},},{name: '美国',type: 'line',data: g,itemStyle: {normal: {color: '#5087ff', //改变折线点的颜色lineStyle: {color: '#5087ff' //改变折线颜色}}},},{name: '俄罗斯',type: 'line',data: h,itemStyle: {normal: {color: '#47b8ff', //改变折线点的颜色lineStyle: {color: '#47b8ff' //改变折线颜色}}},}]

选几个对比度打的颜色就好啦！

实现效果如下：

ECharts 设置折线颜色相关推荐

ECharts 设置折线颜色和小圆点颜色
ECharts 设置折线颜色只需要设置lineStyle的color即可, 设置小圆点颜色只需要设置itemStyle的颜色即可. series: [{name: "seriesName&q ...
echarts 设置背景颜色
问题:echarts 设置背景颜色描述: @Kener-林峰你好,想跟你请教个问题:请问怎么设置echarts整个图标的背景颜色??我用了color属性,在官网实验的时候不显示.... 解决方案1 ...
[echarts] 设置折线图中折线线条颜色和折线点颜色
(1)设置折线线条颜色 lineStyle:{color:'#00FF00'} (2)设置折线折点颜色 itemStyle : {normal : {color:'#00FF00'}} series: ...
echarts设置网格线颜色
xAxis: {type: 'value',//设置网格线颜色splitLine: {show: true,lineStyle:{color: ['#315070'],width: 1,type: ' ...
echarts设置折线图属性
1.设置标题 var option1 = { title:{ text:'当月每日参保人数分布图',//设置标题名字 ...
echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例
本文主要介绍了jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法,结合实例形式分析了jQuery图表插件echarts设置折线图的相关操作技巧,需要的朋友可以参考下,希望能帮助到 ...
echarts 设置各省份颜色
ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11 ...
echarts 折现图和柱状图样式修改设置折线样式背景（文末附带完整代码）
1.设置折线图样式(修改后)(背景竖条纹间隔,去掉边框,设置折线和节点颜色,设置数据字体颜色) 设置折线样式: 设置折线图的背景样式: 2.设置柱状图样式(修改后) 设置柱子的样式设置柱状图背景完 ...
echarts折线图动态修改折线颜色
需求选择每条线的颜色.粗细绘制折线图. 解决动态修改option中对应的样式属性即可.查看echarts官方文档,进行了如下修改. 修改一(明显有问题可跳过,仅做记录.) 效果一: 配置一: op ...

ECharts 设置折线颜色

ECharts 设置折线颜色相关推荐

最新文章

热门文章