<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. box-sizing 属性、min-width属性、max-width属性

    1.box-sizing  这个属性是CSS3新增的属性.IE8开始兼容.box-sizing: border-box; border-box,就是边框的这个小盒.这个属性命令,width数值指的是b ...

  2. zabbix-agent配置文件说明

    zabbix-agent配置文件:/etc/zabbix/zabbix_agentd.conf Server=zabbix server IP,网关IP hostname=本机IP ServerAct ...

  3. linux操作系统基础

    计算机概述 1.计算机接收用户输入指令数据,经过cpu数据与逻辑单元运算处理后,产生或储存成有用的信息--->I/O设备+cpu+处理信息=计算机. 2.计算机五大单元:I/O单元 内存单元 c ...

  4. NSDate 时间

    NSDate *date=[NSDate date]; NSDateFormatter *formatter=[[NSDateFormatter alloc]init]; formatter.date ...

  5. 显示图片的(自定义)吐司Toast

    一般我们提示的时候都是直接提示文字的,其实Toast也可以显示图片 常用方法 Toast.makeText(context,text,duration)这返回一个Toast对象 toast.setDu ...

  6. Java集合类学习笔记(Queue集合)

    Queue集合用于模拟队列(先进先出:FIFO)这种数据类型. Queue有一个Deque接口,代表一个"双端队列",双端队列可以同时从两端来添加.删除元素,因此Deque的实现类 ...

  7. mysql 找回密码方法

    1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录 ...

  8. CentOS 7 64位的安装流程

    若出现以下不支持虚拟机的问题: 表示虚拟机检测到CPU支不支持虚拟化,要去BIOS里设置虚拟化技术设置为enabled:重启电脑-按"F1或Fn+F1"-进入BIOS主界面-移至S ...

  9. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  10. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...