<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 动态折线图的更多相关文章

  1. achartengine画出动态折线图

    achartengine画出动态折线图的效果最近有个项目需要用到实时曲线图,我也上网搜索了一下,最后还是选择使用achartengine这个现成的东西,毕竟自己再canvas一下实在是太麻烦,而且项目 ...

  2. 模拟Windows任务管理器CPU使用率的动态折线图-农夫山泉

    Delphi的TCanvas类可以实现各种复杂的图形输出功能,基于近期项目的需求,利用它实现了一个很炫的动态折线图(模拟了资源管理器中CPU使用率的折线图),可以直观地展现出数值的实时变化情况. 这段 ...

  3. 原生JS实现动态折线图

    原生JS实现动态折线图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...

  4. ECharts使用—折线图动态加载

    最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...

  5. echarts之折线图介绍及使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. echarts版本折线图

    1.效果如下:         绘制折线图,应该算是说echarts中使用最简单也算使用频率最高的一种功能了吧.根据官网列子能找出规律,只是有些属性对于初接触者来说,会有点陌生,不过仔细阅读一下还是不 ...

  7. Echarts line折线图使用(vue)

    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...

  8. 移动端引用echarts的折线图

          移动端写一个图表引用echarts,highcharts插件,本次要找一个能够显示最新数据的折线图,最后只找到显示最大值: 找到echarts的实例:记一下个各功能.   <!DOC ...

  9. echarts实现折线图

    前端框架使用的angular,折线图使用echarts实现. 这里实现的折线图只是简单是折线图,折线图显示在table中,不需要xy轴的数据说明. 1. item.component.html < ...

随机推荐

  1. Javascript学习笔记1 javascript的特点

    ..对于网页而言,Javascript无处不在,对于英语不好的人它简直是噩梦般的存在,但形式所逼,今天开始着手学习!希望自己能坚持下去.从什么地方着手,我的目标是从大处着眼,从应用着眼,不抠细节,反正 ...

  2. 学习iOS

    最近想学习一下iOS开发,不过一点基础都没有,得先从熟悉object-C语法开始,在此把学习中的一些知识点作为记录. mac pro常用操作 学习ios[1]Objective-C 基本语法 学习io ...

  3. uva 10817(状压dp)

    题意:就是有个学校要招老师.要让没门课至少有两个老师可以上.每个样样例先输入三个数字课程数量s,已经在任的老师数量,和应聘的老师数量.已经在任的一定要聘请. 思路是参考了刘汝佳书上的,关键如何状压. ...

  4. dp 动态规划 hdu 1003 1087

    动态规划就是寻找最优解的过程 最重要的是找到关系式 hdu 1003 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 题目大意:求最大字序列和, ...

  5. Windows Store App 音频和视频

    在Windows应用商店应用中提供了MediaElement控件,该控件能为应用提供音频和视频播放功能.就像之前提到的,虽然在多媒体应用开发中,开发人员可以自行开发一套音频.视频编解码规范和开发媒体播 ...

  6. SQL指定字段指定顺序排序

    SELECT * FROM [ProjectInfo]ORDER BY (CASE DepartmentName WHEN 'AAA' THEN 1 WHEN 'BBB' THEN 2 WHEN 'C ...

  7. 【转】valueof()用法

    valueOf()用来返回对象的原始类型的值. 语法 booleanObject.valueOf() 代码:<script> var a = new String("valueO ...

  8. VS一次删除多个窗体后报错

    今天在做项目的时候,需要删除多个窗体,删除了之后,VS报了个错误: 命名空间“项目名称”中不存在类型或命名空间名称“文件夹”(是否缺少程序集引用?) 具体原因不清楚,就算恢复窗体后还是一样的错误,无法 ...

  9. 【初级】linux cp 命令详解及使用方法实战

    cp:复制文件或者目录 前言: cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一.一般情况下,shell会设置一个别名,在命令行下复制文件时,如果目标文件已经存在,就会询问是否覆盖,不 ...

  10. 思维导图MindManager的文件格式与例图

    思维导图软件很多,能够画出思维导图的软件更多.作为流传较广而又比较成熟的思维导图软件,MindManager有专门的文件格式.如果读者想多借鉴导图,就应该了解MindManager的文件格式. Min ...