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 ...
随机推荐
- XMLHttpRequest用法介绍
前言: 传统的Web应用请求服务器返回的一般是是完整的HTML页面,这样往往就需要页面进行刷新操作,不仅耗时而且用户体验度也不好.最典型的代表就是form表单登录操作了.如果登录失败往往是跳转到原网页 ...
- mysql中的正则操作 匹配手机号,匹配中文,替换
mysql中的正则操作 匹配手机号,匹配中文,替换 正则匹配hy_user表内tel字段的电话号码: SELECT * FROM hy_user WHERE tel REGEXP "[1][ ...
- Dubbo Filter详解
转载:https://www.jianshu.com/p/c5ebe3e08161 Dubbo的Filter在使用的过程中是我们扩展最频繁的内容,而且Dubbo的很多特性实现也都离不开Filter的工 ...
- Nginx配置proxy_pass转发/路径问题
proxy_ignore_client_abort on; #不允许代理端主动关闭连接 upstream的负载均衡,四种调度算法 #调度算法1:轮询.每个请求按时间顺序逐一分配到不同的后端服务器,如果 ...
- ELK集群安装配置X-Pack
目前使用的版本不是最新的-6.2.4,6.3以后的版本应该就是集成的了 官方资料: 在线安装步骤:https://www.elastic.co/cn/downloads/x-pack 离线安装步骤:h ...
- C语言宏应用-------#define STR(X) #X
C语言宏应用-------#define STR(X) #X #:会把参数转换为字符串 #define STR(x) #x #define MAX 100 STR(MAX) 会被扩展成" ...
- IPv4分类
IPv4地址按逻辑层次分为五类 A类 保留给政府机构 A类地址第1字节为网络地址,其它3个字节为主机地址.它的第1个字节的第一位固定为0. A类地址网络号范围:1.0.0.0 - 126.0.0.0 ...
- 开源录屏软件Capture推荐
参考链接:有哪些值得推荐的电脑录屏软件与手机录屏软件? - 霸都丶傲天的回答 - 知乎 下载地址(9.0支持中文)
- Java中常量以及常量池
1.举例说明 变量 常量 字面量 int a=10; float b=1.234f; String c="abc"; final long d=10L; a,b,c为变量,d为常量 ...
- Java并发之等待/通知机制
目录 1 前言 1.1 先来段代码放松一下 2 Object wait()/notify() 2.1 一段入门代码 2.2 问题三连击 a.为什么官方说wait() 要放在while里面? b.为什么 ...