echarts实现动态传入数据刷新【可执行】
<!DOCTYPE html> <head>
<meta charset="utf-8">
<title>ECharts</title>
</head> <body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts单文件引入 -->
<script src="../js/tld/echarts3.min.js"></script>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myChart; function display() {
myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [1, 2, 3, 4, 5, 6]
}]
}); // 初始 option
option = {
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
};
} function fetchData(cb) {
// 通过 setTimeout 模拟异步加载
cb({
categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
data: [Math.random(5), Math.random(20), Math.random(36), Math.random(10), Math.random(10), Math.random(20)]
});
} function abc() {
fetchData(function(data) {
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
}
</script>
<input type="button" value="display" onclick="display()" />
<input type="button" value="refresh" onclick="abc()" /> </body> </html>
点击refresh按钮：
再次点击refresh按钮
echarts实现动态传入数据刷新【可执行】的更多相关文章
- 如何在小程序自定义组件和动态传入数据小demo
在开发过程中,我们会将页面常用功能抽象为一个组件,这样既方便又可以避免代码冗余.小程序中也提供了自定义组件,了解Vue的伙伴们会发现其实和Vue的组件化很相似.这里用返回顶部功能来说说如何自定义组件, ...
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- Ext.grid.Panel 数据动态改变后刷新grid
gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...
- echarts动态添加数据
数据异步加载 EChart中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行. 绑定数据的方式有两种,一 ...
- MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新
MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...
- React使用jquery方式动态获取数据
好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...
- MyBatis，动态传入表名，字段名的解决办法
转载:http://luoyu-ds.iteye.com/blog/1517607 今天做项目,遇到的问题就是需求修改数据表的记录,而且字段名都不是固定的,也就是说是需要通过参数传入的, 本来这也不是 ...
- .NET+Ajax+ashx 实现Echarts图表动态交互
前言: 使用Echarts展示图表效果,在这里只做了四种案例:折线.柱状.圆形.雷达.当初是一位朋友用到Echarts展示数据,他没有太多时间弄,所以我就帮他搞出来,当初刚接触的时候也是一头雾水,不知 ...
- IOS tableView的数据刷新
1.tableView的刷新 1> 数据刷新的总体步骤 * 修改模型数据 * 刷新表格(刷新界面) 2> 刷新表格(刷新界面)的方法 * 全局刷新(每一行都会重新刷新) - (void)r ...
随机推荐
- 解决 jersey 单jar包 IME media type text/plain was not found.
1.maven-assembly-plugin 换成 --> maven-shade-plugin <plugins> <!-- shade插件打包成jar包 --> ...
- Windows I/O完成端口
内容: 1.基本概念 2.WINDOWS完成端口的特点 3.完成端口(Completion Ports )相关数据结构和创建 4.完成端口线程的工作原理 5.Windo ...
- springmvc ModelAndView 和 Model
@RequestMapping("") public ModelAndView index(HttpSession session) { Object data = session ...
- android API之android.text.TextWatcher
When an object of a type is attached to an Editable, its methods will be called when the text is cha ...
- PHP-表达式
最精确的定义一个表达式的方式就是"任何有值的东西" $a = 5; 1 > 2;等
- MSSQL-SQL SERVER还原与备份(导入与导出)
备份: 使用Microsoft SQL Server Management Studio查询出想要的列和结果, 在结果处左上角点击, 软件会自动选中查询出的所有结果, 然后右键"将结果另存为 ...
- Integer 内部实现
public static void main(String[] args) { Integer in1 = 128; Integer in2 = 128; System.out.println(in ...
- 使用mysql遇到的异常
Can't find any matching row in the user table 原因 更改mysql.user表之后,没有使用flush privileges命令来更新权限. 解决方案 使 ...
- JS打开新窗口防止被浏览器阻止的方法[转]
本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...
- 分析一帧基于UDP的TFTP协议帧
下图是UDP的段格式: 相比TCP段格式,UDP要简单得多,也没啥好说的,需要注意的是UDP数据长度指payload加上首部的长度. 下面分析一帧基于UDP的TFTP协议帧: 以太网首部 0000: ...