本文介绍了如何使用Echarts实现柱状图数据的自动刷新。首先，展示Echarts的基本配置，然后创建`refreshData`函数用于更新图表数据，最后通过`window.setInterval`定时调用该函数，实现数据每3秒自动刷新。示例中，数据通过模拟的AJAX请求获取，并使用jQuery库。此外，还提及了一个名为`SQLTest.ashx`的后台处理程序，用于返回新的数据。
1.Echarts自动刷新数据
1.Echarts柱状图的正常配置
注：声明了 myChart、test这两个都有用
官方示例中myChart是声明在 function(ec)里面的
var myChart;
var test = 10
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('divProgress'));
var option = {
tooltip: {
show: true
},
animation: false,
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
2.添加 refreshData函数
在第一步在顶部声明的myChart和test都会在refreshData函数里面用上
注：option.series[0].data = data;这句的格式最重要
var myChart;
var test = 10
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('divProgress'));
var option = {
tooltip: {
show: true
},
animation: false,
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
function refreshData(data){
if(!myChart){
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data;
myChart.setOption(option);
}
3.使用window.setInterval 来实现自动刷新数据
用了jQuery的，所以在第一句就引用了jQuery
var myChart;
var test = 10
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
myChart = ec.init(document.getElementById('divProgress'));
var option = {
tooltip: {
show: true
},
animation: false,
legend: {
data: ['销量']
},
xAxis: [
{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
//这里用setTimeout代替ajax请求进行演示
window.setInterval(function () {
var data = [test, 5, 10, 40, 20, 10];
$.get("SQLTest.ashx",function(responseTxt,statusTxt,xhr)
{
test=responseTxt;
//if (statusTxt == "success")alert(test);
if (statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
data = [test, 5, 10, 40, 20, 10];
refreshData(data);
},3000);
function refreshData(data){
if(!myChart){
return;
}
//更新数据
var option = myChart.getOption();
option.series[0].data = data;
myChart.setOption(option);
}
4.SQLTest.ashx
1.ContentType设置为text/plain
2.直接把需要返回的数据 write回来即可
3.当然，在这里随便返回个<=100的整数都行，你完全可以在一个txt文档里面写个60，然后第三步中填上txt文档的路径。
using System;
using System.Web;
using DAL;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
public class SQLTest : IHttpHandler {
SQLHelper SQLAss = new SQLHelper();
string StrCon = ConfigurationManager.ConnectionStrings["DatabaseTest"].ConnectionString;
static int i=;
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/plain";
string sqlstr = "SELECT Progress FROM T_EchartData1 WHERE Num LIKE '" + i.ToString() + "'";
//SELECT Age FROM Person1 WHERE id = '2' SQL可以用等号
var dt = SQLAss.ExecuteQuery(sqlstr, CommandType.Text);//将读取的数据存到dt里面
i++;
if (i >= ) i = ;
context.Response.Write(Convert.ToInt32(dt.Rows[][].ToString()));
}
public bool IsReusable {
get {
return false;
}
}
}
SQL实现类似于自动刷新数据的功能
有时需要在SQL中,定时刷新某张表,比如说是要定时查询某张表的行数,通常做法就是手动的按F5去执行来刷新数据.但是如果这个定时查询历时较长,10分钟,或半小时,手动的话肯定是要崩溃了.貌似SQL没有像 ...
Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...
Json数据异步绑定到界面的Table并且自动刷新
转自:http://blog.youkuaiyun.com/jianxin1009/article/details/8565828‘ 做Winform习惯了,大家都习惯设置datasource这样的写法. 如果想 ...
html页面实现自动刷新的几种方法
使用场景: 1. 页面需要定时刷新,实时加载数据(H5中的WebSocket和SSE可以实现局部刷新) 2. 一定时间之后跳转到指定页面(登录注册之类) 3. 前端开发使用伪数据调试html页面(修改 ...
$state.go页面不刷新数据
http://blog.youkuaiyun.com/WenJimmy/article/details/51027952 假如进入market/beian/add添加数据,保存提交后回退market/beian列 ...
Windows Phone 8 LongListSelector实现下拉自动刷新列表
LongListSelector是一个加强版的列表控件,它可以实现分组的列表,如系统人脉列表的交互效果就可以利用LongListSelector控件去实现,同时LongListSelector也一样可 ...
UIRefreshControl自动刷新
不知道UIRefreshController是什么的朋友可以参考iOS6新特征:UIRefreshControl[下拉刷新]使用示例 一文了解这是什么,这里只提怎么使用代码的方式触发UIRefresh ...
ajax+jsp自动刷新
通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...
iOS - UIRefreshControl		刷新数据
前言 NS_CLASS_AVAILABLE_IOS(6_0) __TVOS_PROHIBITED @interface UIRefreshControl : UIControl 1.UIRefresh ...
随机推荐
各种浏览器的userAgent收集
window.navigator.userAgent 1) Chrome Win7: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KH ...
JS写的CRC16校验算法
var CRC = {}; CRC.CRC16 = function (data) { var len = data.length; if (len > 0) { var crc = 0xFFF ...
android 学习随笔五(界面)
把数据库内容显示到界面 清单文件设置为线性布局(5大布局属于ViewGroup) 在清单文件中可以增加View显示 LinearLayout ll = (LinearLayout) findViewB ...
0_Linux_虚拟机安装
虚拟机的安装0Snapshot和clone 系统分区(由硬盘的性能所限制的) 1分区类型: 主分区:最多有4个 扩展分区:最多只能有1个:主分区加扩展分区最多有4个:不能写入数据,只能包含逻辑分区,不 ...
tornado之Hello world
#!/usr/bin/env python26 #-*- coding:utf8 -*- import tornado.httpserver import tornado.ioloop import ...
linux服务搭建----ftp与ftp yum源搭建
ftp服务 如果没有ftp yum -y install vsftpd (前提是你在有yum源的情况下才可以使用这条命令) service vsftpd resta ...
高斯消元(Gauss消元)
众所周知,高斯消元可以用来求n元一次方程组的,主要思想就是把一个n*(n+1)的矩阵的对角线消成1,除了第n+1列(用来存放b的)的其他全部元素消成0,是不是听起来有点不可思议??! NO NO NO ...
Confluence 6 已经存在的安装配置数据库字符集编码
针对已经存在的 Confluence 安装,如果你安装的 Confluence 版本是 6.4 或者早期的版本,我们在安装的时候没有检查你数据库的字符设置. 如果你的数据库当前没有被配置使用 UTF- ...
页面用一个遮罩层显示加载，加载完后隐藏该div
扫一扫
6696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
