echart折线图小知识
Posted cy的小天地
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echart折线图小知识相关的知识,希望对你有一定的参考价值。
1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示。
比如我们要隐藏的折线叫”联盟广告“,代码如下
1 var selected = {}; 2 selected[‘联盟广告‘] = false; 3 option.legend.selected = selected; 4
在series中依然有它相关的数据
1 series : [ 2 { 3 name:‘邮件营销‘, 4 type:‘line‘, 5 stack: ‘总量‘, 6 data:[120, 132, 101, 134, 90, 230, 210] 7 }, 8 { 9 name:‘联盟广告‘, 10 type:‘line‘, 11 stack: ‘总量‘, 12 data:[220, 182, 191, 234, 290, 330, 310] 13 } 14 ] 15 };
这样,当我们点击的时候,折线就显示了。
2)折线坐标轴太粗,不够细?颜色不好看?
那么,可以这样改
1 xAxis : [ 2 { 3 axisLine:{ 4 lineStyle:{ 5 color: ‘#999‘, 6 width:1, 7 } 8 } 9 10 } 11 ],
y轴也同理。
3)分隔线颜色设置
1 splitLine:{ 2 lineStyle:{ 3 color:‘#fff‘ 4 } 5 }
4)添加数据
1 option.series.push({ 2 name: ‘新增人数‘, 3 type: ‘line‘, 4 stack: ‘总量‘, 5 data:[20, 18, 10, 5, 5, 5, 7,20, 44, 80, 34, 33,35, 60,20, 30, 20, 60, 33, 55, 60,50,45,24] 6 });
以上是关于echart折线图小知识的主要内容,如果未能解决你的问题,请参考以下文章