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轴的值越来越大的时候就出现了这个显示不全 ...
随机推荐
- strip_tags,htmlspecialchars,htmlentities,stripslashes,addslashes学习小结
一.strip_tags 从字符串中去除 HTML 和 PHP 标记 string strip_tags ( string $str [, string $allowable_tags ] ) str ...
- Linux中安装Cisco Packet Tracer
Cisco Packet tracer是什么? Cisco Packet Tracer是一个强大的网络模拟工具,用于进行Cisco认证时的培训.它为我们 提供了各个路由器和网络设备的良好的接口视图,这 ...
- Bootstrap_排版
标题: Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体 ...
- socket 异步选择 WSAAsyncSelect 用法
WSAAsyncSelect 实现给异步socket给了另一种实现方式,就是通过窗口消息的方式来提醒对socket接收还是发送 msdn有非常全面的解释:https://msdn.microsoft. ...
- ettercap
作者: 官网:http://ettercap.github.io/ettercap/ 源码:https://github.com/Ettercap/ettercap 功能:arp欺骗
- C# 线程（三）：如何操纵一个线程
From : http://kb.cnblogs.com/page/42529/ 下面我们就动手来创建一个线程,使用Thread类创建线程时,只需提供线程入口即可.(线程入口使程序知道该让这个线程干什 ...
- ubuntu 安装遇到黑屏
1.安装了ubuntu之后,进入登录页面,然后用输入密码后就黑屏了,按ctrl+alt+f1都没用,也进不去命令界面,查找资料后发现是必须在虚拟机->设置->硬件->显示器,上把加速 ...
- iOS - OC 数据持久化
1.Sandbox 沙箱 iOS 为每个应用提供了独立的文件空间,一个应用只能直接访问为本应用分配的文件目录,不可以访问其他目录,每个应用自己独立的访问空间被称为该应用的沙盒.也就是说,一个应用与文件 ...
- poj3565Ants(KM-几何与图论的结合）
链接 可以看出蓝的之和一定比红的之和要大,也就是说符合条件的匹配一定是权值最小的,所以二分图的最佳完美匹配..KM #include <iostream> #include<cstd ...
- Monkey学习（4）简单测试实例
1.首先测试设备是否连接成功,在命令行中输入: adb devices 如果出现设备信息,代表链接成功.我这里的设备名称是“emulator-5554” 2.得到测试apk的包名,如果有APK源码包的 ...