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                         });

5)改变柱子的颜色

 series : [{name:'累计用户',type:'bar',stack: '总量',barWidth:'25',barCategoryGap:'40%',itemStyle:{  normal:{  color:'#ffb3b3'}  },  areaStyle: {normal: {}},data:[20, 18, 10, 5, 5, 5, 7,20, 24, 20, 34, 33, 55, 100,20, 40, 20, 60, 33, 55, 60,50,45,24,55, 60,50,45,24]}]

在series中的itemStyle中改变color的值即可

转载于:https://www.cnblogs.com/cyppi/p/6123336.html

echart折线图小知识相关推荐

echart折线图连线不显示问题总结
echart折线图,series动态数据不能有空数据,不然,只有数据点,而连线出不来.
echart折线图，柱状图，饼图设置颜色
转载: 之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain ...
echart 折线图、柱状图、饼图、环形图颜色修改
之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: [javascript] view plain copy ...
echart折线图 -- 每条线分别对应不同x、y轴数据
代码示例 option = {legend: {data:['曲线1', '曲线2']},tooltip : {trigger: 'axis',axisPointer: {type: 'cross', ...
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
[vue+elementUI+echarts]echart折线图展示后台传来的数据
最近项目遇到了这个问题,来记录一下,方便以后复制粘贴23333 主要功能: 循环遍历渲染后台传来的一堆数据,然后点击每一条数据的More Info按钮展示对应的折线图表格数据. 引elementUi和 ...
Echart折线图横坐标时间获取
Echarts 折线图的js option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', ' ...
预测股市？echart折线图展示CPI，PPI剪刀差和股市的关系
CPI:消费者物价指数,代表群众购买物品的价格的增长率.我们可以很暴力的认为CPI就是公司的物品售价增长率. PPI:工业生产者出产价格指数,顾名思义是公司生产物品的成本价的增长率. 如果我们用CPI ...
bootstarp table完成数据渲染之后展示趋势图（echart折线图）
使用onLoadSuccess 函数,在bootstarp table完成数据渲染之后初始化echart

echart折线图小知识

echart折线图小知识相关推荐

最新文章

热门文章