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 ...
随机推荐
- SAP SQ01怎样从开发机传输到生产机
确认你的Query是本地的还是全局的(跨Client).假设是后者,会自己主动生成传输请求,用标准传输方式就可以. 假设是本地的Query,有两种方式: 方式1:复制成全局的,让后生成传输请求 方式2 ...
- python之函数用法__str__()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法__str__() #http://www.cnblogs.com/hongfei/p ...
- 九度OJ 1183 守形数 （模拟）
题目1183:守形数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2663 解决:1424 题目描写叙述: 守形数是这样一种整数.它的平方的低位部分等于它本身. 比方25的平方是625. ...
- 【laravel5.4】使用baum\node 类库实现无限极分类
1.在model中引入baum\node 类库,并继承,具体参考 https://packagist.org/packages/baum/baum 2.核心代码: /* * model::create ...
- Maven 向私服nexus上传jar
1. 单个jar上上传 方法一:利用界面(省略) 方法二:利用命令行: 1). 安装到本地库:mvn install:install-file -DgroupId=org.apache.hadoop ...
- www.pythonchanlleges.com
0. 2**38 1. 字符串映射 s = """ g fmnc wms bgblr rpylqjyrc gr zw fylb. rfyrq ufyr amknsrcpq ...
- SDL 2.0 API by Category
Basics View information and functions related to... View the header Initialization and Shutdown SDL. ...
- RHEL7 -- 通过gerp使用正则表达式
正则表达式常会含有shell元字符(如S.*等),建议使用单引号('')来括起行令上的正则表达式 1.行定位符号 行首定位符号^和行尾定位符$ #找出以s开头的行: # grep '^s' /etc/ ...
- Error_GL_总账日记账过账失败
- 关于centos7中使用rpm方式安装mysql5.7版本后无法使用root登录的问题
最近在centos7中通过rpm方式安装了最新版本的mysql-server 5.7 (mysql57-community-release-el7-7.noarch.rpm) ,发现安装成功后无法使用 ...