ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可。
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
(题外话:我还专门查了下什么叫做折线图堆叠~
折线图堆叠的意思就是:第二条线的数值=本身的数值+第一条线的数值,第三条的数值=第二条线图上的数值+本身的数值,以此类推......
拿官网的数据举例(以周一的数据为例):堆叠图实际显示的是:邮件营销=120,联盟广告=120+220=340,视频广告=340+150=490,直接访问=490+320=810,搜索引擎=810+820=1630)
ECharts折线图堆叠设置为不堆叠的方法的更多相关文章
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- echarts折线图,数据切换时(最近七天)绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- echarts折线图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
- 知识点4: 配置echarts折线图和饼图
折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...
- eCharts 折线图,动态绑定数据不更新图表的问题,
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
随机推荐
- spring(一)IOC & AOP
参考文档: spring详解:http://www.cnblogs.com/ysocean/p/7466191.html(可以说非常详细了) aop源码详解:https://www.cnblogs.c ...
- Java编程思想之三 操作符
在底层,Java中的数据是通过使用操作符来操作的. 3.2 使用Java操作符 操作符接收一个或多个参数,并生成一个新值. 操作符作用于操作数,生成一个新值.有些操作符可能会改变操作数自身的值,这被称 ...
- Weblogic部署web项目代码中获取项目名为null的问题
写在前面 这个问题之前遇到一次, 时间久就忘了, 还是好记性不如烂笔头, 记一下吧.Windows下部署到Tomcat和Linux下部署到Weblogic的获取项目名写法. 关键代码 java代码 w ...
- mestasploit笔记 :MS17-010
实验环境 操作机 :Kali 2017 操作机IP:172.16.11.2 目标机:Windows 7 目标机IP:172.16.12.2 实验目的 认知Windows远程溢出漏洞的危害 知悉MS17 ...
- Logstash配置以服务方式运行
Logstash官网最新版下载地址以及YUM源:https://www.elastic.co/cn/downloads/logstash Logstash最常见的运行方式即命令行运行 ./bin/lo ...
- Redis 启动 Please see the documentation included with the binary distributions for more details on the --maxheap flag.
启动redis的时候,出现 主要就是说 没有足够的可用的空间,可以使用maxheap减少redis堆的大小.或者重启系统对系统分页文件进行碎片整理. 解决方法就是在启动的时候加个 --maxheap ...
- Js设置打印缩放
近期需要优化一个打印项目,因为是固定长度,所以需要缩放打印,记录一下 //获取打印的页面内容 let subOutputRankPrint = document.getElementById('pri ...
- [转].gitignore文件不起作用的解决方案
.gitignore文件不起作用的解决方案 觉得有用的话,欢迎一起讨论相互学习~Follow Me 转载地址 https://www.cnblogs.com/liugp/p/10399282.html ...
- 由crt和key文件生成keystore文件
该图转自知乎 海棠依旧 1.先生成p12文件,生成的时候需要指定密码 openssl pkcs12 -export -in your_crt.crt -inkey your_key.key -out ...
- java CountDownLatch报错java.lang.IllegalMonitorStateException: null
笔者使用websocket进行通信,服务器异步返回.websocket服务器又异步调用其他websocket,也是异步访问. 由于无法预测服务器调用第三方websocket什么时候调用结束,使用了Co ...