echarts折线图--数据交互
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="height:400px;"></div> <script src="js/echarts.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'js/'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
setInterval(function(){
$.get("js.json",function(data){
var lineNum={lengend:[],data:[]};
for(var i=0;i<data.length;i++){
lineNum["lengend"].push(data[i]["name"]);
var obj={};
obj.name=data[i]["name"];
obj.type="line";
obj.data=data[i]["num"];
lineNum["data"].push(obj);
}
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:lineNum["lengend"]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series:lineNum["data"] /*[
{
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对象加载数据
myChart.setOption(option);
},"json")
},1000);
}
);
</script>
</body>
</html>
echarts折线图--数据交互的更多相关文章
- 解决echarts的叠堆折线图数据出现坐标和值对不上的问题
原文:https://blog.csdn.net/qq_36538012/article/details/88889545 ------------------------------- 说一个小bu ...
- echarts折线图，数据切换时（最近七天）绘图不合理现象
echarts折线图,当进行数据切换时存在绘制不合理的问题,数据没错,但绘制不对. 两个0之间的连线应该是平滑直线,如图: 正确的显示: 解决: 在myCharts.setOption(option) ...
- echarts折线图动态改变数据时的一个bug
echarts折线图中当增加dataZoom,修改start大于0的时候,会出现折线混乱,变成竖直的线,绘制有问题. 解决方法,在dataZoom中增加filterMode: 'empty' http ...
- 实现Echarts折线图的虚实转换
需求:医院的体温单,在统计体温时,对于正常情况下统计的体温数据,需要显示实线:对于进行物理降温后统计的体温数据,需要显示虚线. 现有的体温单是运用 Echarts 折线图,统一用实线显示.因此在这基础 ...
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- d3.js 教程 模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
- eCharts 折线图，动态绑定数据不更新图表的问题，
官方文档 : http://echarts.baidu.com/tutorial.html npm install echarts --save let lineChart = echarts.ini ...
- Echarts 折线图y轴标签值太长时显示不全的解决办法
问题 分析 解决办法 问题 先看一下正常的情况 再看一下显示不全的情况 所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
随机推荐
- 预编译那些事＃define后面只跟一个“参数”
一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条件时对一组语句进行编译,而当条 ...
- mfc学生成绩录入与查询
1.声明结构体 struct Person{ char name[8]; char yuwen[8]; char math[8];}; 2.成绩录入 在"保存"按钮中实现以下代码 ...
- C++vector迭代器失效的问题
转载:http://blog.csdn.net/olanmomo/article/details/38420907 转载:http://blog.csdn.net/stpeace/article/de ...
- visual studio运行时库MT、MTd、MD、MDd的研究(转载)
转载:http://blog.csdn.net/ybxuwei/article/details/9095067 转载:http://blog.sina.com.cn/s/blog_624485f701 ...
- ASP.NET导入导出
//创建一个数据链接 // string strCon =" Provider=Microsoft.Jet.OLEDB.4.0;Data Source={0} ;Extended Prope ...
- 四HttpServletResponse常见应用——生成验证码
转载自http://www.cnblogs.com/xdp-gacl/p/3791993.html 一.HttpServletResponse常见应用——生成验证码 1.1.生成随机图片用作验证码 生 ...
- 【leetcode❤python】Convert a Number to Hexadecimal
#-*- coding: UTF-8 -*- class Solution(object): hexDic={0:'0',1:'1',2:'2',3:'3',4:'4',5:'5',6:'6', ...
- [SAP ABAP开发技术总结]数据输入输出转换、小数位/单位/货币格式化
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]选择屏幕——SELECT-OPTIONS
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Java、fileless恶意软件威胁桌面安全
工作原理:用户访问一个受侵的网站,不小心下载了最新类型的恶意软件.如果你的杀毒软件运行良好的话,就会阻止下载,至少能够检测到并隔离硬盘上的入侵文件.但是如果硬盘上没有文件监测呢?如果恶意软件只入侵内存 ...