Echarts 动态折线图
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script src="http://resource.xiaoyou-game.com/static/public/scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); function refresh(){ var orderid = $('#orderid').val();
var machineid = $('#machineid').val();
var date = $('#date').val();
//alert($('#orderid').val());
$.ajax({
type: "post",
url: "http://ccc.com/bbb/aaa",
dataType: "json",
data:{'orderid':orderid,'machineid':machineid,'date':date},
success: function (data) { var hour = data.hour;
var usercount = data.usercount; var option = {
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line','bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
tooltip: {
show: true
},
legend: {
data:['用户数量']
},
xAxis : [
{
type : 'category',
data : hour
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"用户数量",
"type":"line",
"data":usercount,
itemStyle: {
normal: {
label : {
show: true,
position:"top"
}
}
}
}
]
}; // 为echarts对象加载数据
myChart.setOption(option); },
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
// 基于准备好的dom,初始化echarts图表
</script>
Echarts 动态折线图的更多相关文章
- achartengine画出动态折线图
achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...
- 模拟Windows任务管理器CPU使用率的动态折线图-农夫山泉
Delphi的TCanvas类可以实现各种复杂的图形输出功能,基于近期项目的需求,利用它实现了一个很炫的动态折线图(模拟了资源管理器中CPU使用率的折线图),可以直观地展现出数值的实时变化情况. 这段 ...
- 原生JS实现动态折线图
原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
- echarts之折线图介绍及使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- echarts版本折线图
1.效果如下: 绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...
- Echarts line折线图使用(vue)
实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
- 移动端引用echarts的折线图
移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能. <!DOC ...
- echarts实现折线图
前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...
随机推荐
- javascript 实现页面加载完再显示页面
document.onreadystatechange = function () { if (document.readyState == "complete") { docum ...
- 学习iOS
最近想学习一下iOS开发,不过一点基础都没有,得先从熟悉object-C语法开始,在此把学习中的一些知识点作为记录. mac pro常用操作 学习ios[1]Objective-C 基本语法 学习io ...
- uiscrollView UINavigation和uitabbar添加约束的问题
首先是层次问题, 我的storyboard中 底层是一个View(viewcontroller自带)上面添加了一个UIScrollview(添加约束, 上下左右全为0), 在UIScrollview上 ...
- MVC5+EF6 入门完整教程六
本篇我们谈谈分部视图(Partial View). 上篇文章提到过Partial和Action这两个helper, 本篇文章主要就结合这两个helper来讲解分部视图(Partial View)的应用 ...
- org.apache.catalina.webresources.Cache.getResource Unable to add the resource
org.apache.catalina.webresources.Cache.getResource Unable to add the resource at xxx to the cache be ...
- winform碎片
1.通过同一个pictureBox控件加载不同的图片,在加载前需要释放控件里之前的Image. pictureBox1.Image.Dispose();//Dispose之后对象就不存在了,只能重新C ...
- 荣品四核4412开发板的USB摄像头问题
RP4412开发板是荣品电子研发的一款三星四核Exynos4412评估板开发板,支持WIFI+LAN上网.蓝牙4.0.4G上网.500万自动对焦摄像头.GPS.网卡.音频,1080P HDMI音视频同 ...
- android开发 兵器
spring for android andriod anotatons 按android原生的方式写代码,会导致冗余,代码丑陋,开发效率低下. 最近对项目代码进行一些梳理和改进.
- 【转】2014年25款最好的jQuery插件
2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP 时间:2014-12-30 10:24:10 阅读数:2267 分享到: 0 http://www.php10 ...
- IOS 使用wxsqlite3为sqlite3数据库加密
1,下载wxsqlite3 地址http://jaist.dl.sourceforge.net/project/wxcode/Components/wxSQLite3/wxsqlite3-3.1.1. ...