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 < ...
随机推荐
- java的前台与后台
技术上:前台是指web展示,webservice接口等输入输出接口,后台是指支持这些接口的程序. 例如读写数据库,读写文件,业务逻辑处理. 业务上来讲:前台是提供给最终用户使用的界面,后台是指管理使用 ...
- Oracle表空间,用户,用户授权
一:Oracle表空间 1,Oracle表空间与SQL Server文件组对比 SQL Server的文件组(文件组包括若干MDF,NDF数据文件)对我们来说并不陌生,前段时间我在博客“怎样玩转千万级 ...
- CentOS x64上Matlab R2015b的镜像安装方法与卸载
0. 原料 (1). CentOS_x64系统 CentOS 2.6.32-573.el6.x86_64 (2). Matlab R2015b_glnxa64.iso,可以从百度网盘下载到:链接: ...
- hdoj 1385Minimum Transport Cost
卧槽....最近刷的cf上有最短路,本来想拿这题复习一下.... 题意就是在输出最短路的情况下,经过每个节点会增加税收,另外要字典序输出,注意a到b和b到a的权值不同 然后就是处理字典序的问题,当松弛 ...
- 激活Microsoft Office professional plus 2010
1. 下载工具 http://pan.baidu.com/s/1dDDFhEL 2. 启动工具 双击Office 2010 Toolkit.exe 在Activation选项栏中选择AutoKMS C ...
- C++ 类、构造析构、深拷贝
1st,感性理解类的思想,就是把数据和对数据的操作打包在一块儿,设计类的时候要 想好数据部分和 要进行的操作.以下是时间类的示意,时间包含时分秒,Time为构造函数,该类支持的操作就是设置时间和读取时 ...
- 发布自己的pods到CocoaPods trunk 及问题记录
这两天准备把之前写的一些小玩意添加到pods库中去,参考了一些资料后进行操作,实际中也遇到了一些问题,记录下来,问题及解决方式在后面. 参考内容转载如下: 首先更新了用trunk之后,CocoaPod ...
- eclipse 启动失败(找不到jvm)
今天启动eclipse时提示了一个错误 在网上找到的解决方法是在eclipse的快捷方式中加入Java的JVM的路径,方法如下: 右键eclipse快捷方式 ->属性 在目标中 如果只有 D: ...
- Uart、SPI和I2C的区别
串口通信:UART.SPI.I2C区别[引用] 1.UART就是两线,一根发送一根接收,可以全双工通信,线数也比较少.数据是异步传输的,对双方的时序要求比较严格,通信速度也不是很快.在多机通信上面 ...
- ubuntu关于apache服务命令
一.Start Apache 2 Server /启动apache服务 # /etc/init.d/apache2 startor$ sudo /etc/init.d/apache2 start 二. ...