echarts 堆叠折线
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]
}
]
};
echarts 堆叠折线的更多相关文章
- Echarts自定义折线图例,增加选中功能
用Echarts图表开发,原本的Echarts图例不一定能满足我们的视觉要求. 下面是Echarts 折线图自定义图例,图例checked选中,相应的折线线条会随之checked,其余未选中的图例对应 ...
- Echarts案例-折线图
一:先在官网下载 https://www.echartsjs.com/zh/download.html 然后再建立工程,导入这两个包: 写代码: <!DOCTYPE html> <h ...
- echarts版本折线图
1.效果如下: 绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- echarts堆叠图添加总量
echarts在使用中往往会遇到需要展示总量信息的情况,比较典型的就是3维统计的堆叠柱状图 堆叠是在柱状图的基础上,给几项设置同一stack来实现的.不考虑在tips中实现总和,有两种方式可以实现总和 ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- echarts之折线图配置(附带图例很多做成分页效果)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 移动端引用echarts的折线图
移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能. <!DOC ...
- echarts实现折线图
前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...
随机推荐
- tensorflow 下的滑动平均模型 —— tf.train.ExponentialMovingAverage
在采用随机梯度下降算法训练神经网络时,使用 tf.train.ExponentialMovingAverage 滑动平均操作的意义在于提高模型在测试数据上的健壮性(robustness). tenso ...
- 算法 Tricks(三)—— 判断序列是否为等差数列
判断一个数列不是等差数列,要比判断一个数列是等差数列比较容易. bool progressive = true; for (int i = 0; i < A.size() - 1; ++i){ ...
- 算法练习--二分搜索哈希表-JS 实现
1. 以哈希KEY的值建立二叉哈希表 2. 依据传入的哈希值使用二分法搜索 详细实现例如以下: function binarySearchTable(comp){ this.comp = comp; ...
- php实现判断树的子结构
php实现判断树的子结构 一.总结 很简单的递归判断 二.php实现判断树的子结构 题目描述: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 三.代码 代 ...
- POJ 1562 Oil Deposits (HDU 1241 ZOJ 1562) DFS
现在,又可以和她没心没肺的开着玩笑,感觉真好. 思念,是一种后知后觉的痛. 她说,今后做好朋友吧,说这句话的时候都没感觉.. 我想我该恨我自己,肆无忌惮的把她带进我的梦,当成了梦的主角. 梦醒之后总是 ...
- 洛谷 P2197 nim游戏
洛谷 P2197 nim游戏 题目描述 甲,乙两个人玩Nim取石子游戏. nim游戏的规则是这样的:地上有n堆石子(每堆石子数量小于10000),每人每次可从任意一堆石子里取出任意多枚石子扔掉,可以取 ...
- php实现 坐标移动
php实现 坐标移动 一.总结 一句话总结:伪代码,带函数逻辑,函数这样的方式写算法程序会节约超多的时间. 1.为什么算法题数据输入最好用多组数据输入的方式? 因为都是多组数据测试,而且多组数据输入 ...
- [Vue] Use Vue.js Watchers to Respond to Async Updates
Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified a ...
- Android TextView,EditText要求固定行数自动调整TextSize
最近项目有个需求要求文本最多显示3行,继续输入则字体变小,删除已经输入的文字,那么字体变大,不管变大变小都不能超过3行.网上怎么找也找不到相关的解决方案,自己动手,丰衣足食了! 说一下算法思路,后面给 ...
- Bootstrap手机网站开发案例
Bootstrap手机网站开发案例 一.总结 一句话总结:Bootstrap手机网站开发注意事项(3点):a.引入viewpoint声明,b.通过屏幕宽动态控制元素显隐 c.图片添加自适应 1.Boo ...