|
1.Echarts自動刷新數(shù)據(jù) 1.Echarts柱狀圖的正常配置
注：聲明了 myChart、test這兩個都有用
官方示例中myChart是聲明在 function(ec)里面的
<script src="http://cdn./jquery/2.1.1-rc2/jquery.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> var myChart; var test = 10 // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基于準(zhǔn)備好的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對象加載數(shù)據(jù) myChart.setOption(option); } ); </script> 2.添加 refreshData函數(shù)
在第一步在頂部聲明的myChart和test都會在refreshData函數(shù)里面用上
注：option.series[0].data = data;這句的格式最重要
<script src="http://cdn./jquery/2.1.1-rc2/jquery.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> var myChart; var test = 10 // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基于準(zhǔn)備好的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對象加載數(shù)據(jù) myChart.setOption(option); } ); function refreshData(data){ if(!myChart){ return; } //更新數(shù)據(jù) var option = myChart.getOption(); option.series[0].data = data; myChart.setOption(option); } </script> 3.使用window.setInterval 來實(shí)現(xiàn)自動刷新數(shù)據(jù)
用了jQuery的，所以在第一句就引用了jQuery
<script src="http://cdn./jquery/2.1.1-rc2/jquery.min.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> var myChart; var test = 10 // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ], function (ec) { // 基于準(zhǔn)備好的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對象加載數(shù)據(jù) myChart.setOption(option); } ); //這里用setTimeout代替ajax請求進(jìn)行演示 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; } //更新數(shù)據(jù) var option = myChart.getOption(); option.series[0].data = data; myChart.setOption(option); } </script> 4.SQLTest.ashx
1.ContentType設(shè)置為text/plain
2.直接把需要返回的數(shù)據(jù) write回來即可
3.當(dāng)然，在這里隨便返回個<=100的整數(shù)都行，你完全可以在一個txt文檔里面寫個60，然后第三步中填上txt文檔的路徑。
<%@ WebHandler Language="C#" Class="SQLTest" %> 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=1; 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);//將讀取的數(shù)據(jù)存到dt里面 i++; if (i >= 6) i = 1; context.Response.Write(Convert.ToInt32(dt.Rows[0][0].ToString())); } public bool IsReusable { get { return false; } } }
|
|
|
