Echarts自動刷新數據

1.Echarts自動刷新數據

---

1.Echarts柱狀圖的正常配置

注：聲明瞭 myChart、test這兩個都有用

官方示例中myChart是聲明在 function(ec)裏面的

<script src="http://cdn.staticfile.org/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) {
            // 基於準備好的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);
        }
    );
</script>

2.添加 refreshData函數

在第一步在頂部聲明的myChart和test都會在refreshData函數裏面用上

注： option . series [ 0 ]. data = data ; 這句的格式最重要

<script src="http://cdn.staticfile.org/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) {
            // 基於準備好的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);    
}
</script>

3.使用window.setInterval 來實現自動刷新數據

用了jQuery的，因此在第一句就引用了jQuery

<script src="http://cdn.staticfile.org/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) {
            // 基於準備好的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);    
}
</script>

4.SQLTest.ashx

1.ContentType設置爲text/plain

2.直接把須要返回的數據 write回來便可

3.固然，在這裏隨便返回個<=100的整數都行，你徹底能夠在一個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);//將讀取的數據存到dt裏面
        i++;
        if (i >= 6) i = 1;
        context.Response.Write(Convert.ToInt32(dt.Rows[0][0].ToString()));
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

來自爲知筆記(Wiz)