下图是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折线图堆叠设置为不堆叠的方法的更多相关文章

  1. d3.js 教程 模仿echarts折线图

    今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...

  2. 实现Echarts折线图的虚实转换

    需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...

  3. echarts折线图动态改变数据时的一个bug

    echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...

  4. echarts折线图,数据切换时(最近七天)绘图不合理现象

    echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...

  5. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  6. echarts折线图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. Echarts 折线图y轴标签值太长时显示不全的解决办法

    问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...

  8. 知识点4: 配置echarts折线图和饼图

    折线图 效果图 html <template> <div id="v11-charts3"></div> </template> j ...

  9. eCharts 折线图,动态绑定数据不更新图表的问题,

    官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...

随机推荐

  1. OpenFOAM——冲击斜坡

    本算例来自<ANSYS Fluid Dynamics Verification Manual>中的VMFL045: Oblique Shock Over an Inclined Ramp ...

  2. 【Gamma】Scrum Meeting 5

    目录 写在前面 进度情况 任务进度表 照片 写在前面 例会时间:6.1 22:45-23:00 例会地点:微信群语音通话 代码进度记录github在这里 临近期末,团队成员课程压力均较大,需要较多时间 ...

  3. mvn常见参数命令讲解

    关于-N -N,--non-recursive Do not recurse into sub-projects 意思是,不递归到子项目(子模块). 举例: 一个父项目下Father面有3个子项目A. ...

  4. hbuilderx - 常用快捷键操作

    常用的操作有(缺少一个快捷键,就是选中行) 1. ctrl+/ 注释代码 2. ctrl+y 恢复撤销 3. ctrl+x 剪切 4. ctrl+z 撤销 5. ctrl+c 复制 6. ctrl+p ...

  5. OSPF协议介绍及配置

    一.OSPF概述 回顾一下距离矢量路由协议的工作原理:运行距离矢量路由协议的路由器周期性的泛洪自己的路由表,通过路由的交互,每台路由器都从相邻的路由器学习到路由,并且加载进自己的路由表中,而对于这个网 ...

  6. Navicat连接MySQL8.0出现1251-Client does not support authentication protocol requested by server;

    因为安装的MySQL是8.0版本的,因为在安装的时候采用了新的加密方式. 我们需要使用 cmd命令,连接mysql 1.   更改加密方式 mysql> ALTER USER 'root'@'l ...

  7. 【451】python 同一行打印进度条

    参考:Python3 Print 同一行打印显示进度条效果 参考:\r\n, \r and \n what is the difference between them? [duplicate] 参考 ...

  8. koa2 post请求ctx.request.body空获取不到的解决办法

    header请求头添加Content-type: application/json

  9. leetcode刷题系列(一) 26题 删除排序数组中的重复项

    题干 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示 ...

  10. mybatis批量新增或更新

    mysql中在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE时,向数据库中插入一条记录: 若插入数据的主键值/ UNIQUE KEY 已经在表中存在,则执行更新操作(UPDA ...