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 ...
随机推荐
- 通过导入虚拟电脑的方式还原centos
通过oracle vm VirtualBox安装完成一台centos,然后导出虚拟电脑,再通过导入虚拟电脑的方式还原一台centos,还原的时候改一下机器名,不要选择重新初始化所有网卡mac,还原完成 ...
- Redis学习（5）-Jedis(Java操作redis数据库技术)
Java连接redis 一,导入jar包 Redis有什么命令,Jedis就有什么方法 设置防火墙 在Linux上面运行如下代码: 单实例:Jedis实例: package com.jedis.dem ...
- Java 获取盘符及分类
import java.io.File; import javax.swing.filechooser.FileSystemView; public class ByteTest { public s ...
- Ajax Control Toolkit 34个服务器端控件的使用
摘自:http://blog.csdn.net/yaoshuyun/article/details/2218633 1. Accordion[功能概述] Accordion可以让你设计多个panel ...
- js常用点
<span onClick="onDetail(this.id,'edit');" style="cursor: hand;color:black;" ...
- Linux命令-实时监测命令：watch
watch 是一个非常实用的命令,基本所有的 Linux 发行版都带有这个小工具,如同名字一样,watch 可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行..在Linux下,watch是周期性 ...
- PO_本地一揽子采购协议（流程）
2014-06-04 Created By BaoXinjian
- 文件的内核结构file和dup实现重定向
一.打开文件内核数据结构 1.一个进程打开两个文件 文件状态标志:读.写.追加.同步.非阻塞等 2.一个进程两次打开同一文件 3.两个进程打开同一文件 示例程序: C++ Code 1 2 3 4 ...
- Template Method - 模板方法模式
1.概述 在面向对象开发过程中,通常我们会遇到这样的一个问题:我们知道一个算法所需的关键步骤,并确定了这些步骤的执行顺序.但是某些步骤的具体实现是未知的,或者说某些步骤的实现与具体的环境相关.例子1: ...
- CMA概述
前言 本文是近期学习CMA模块的一个学习笔记,方便日后遗忘的时候,回来查询以便迅速恢复上下文. 学习的基本方法是这样的:一开始,我自己先提出了若干的问题,然后带着这些问题查看网上的资料,代码,最后整理 ...