1.Echarts自動(dòng)刷新數(shù)據(jù)

---

1.Echarts柱狀圖的正常配置
注：聲明了 myChart、test這兩個(gè)都有用
官方示例中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) {
            // 基于準(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.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) {
            // 基于準(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)自動(dòng)刷新數(shù)據(jù)

用了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) {
            // 基于準(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)然，在這里隨便返回個(gè)<=100的整數(shù)都行，你完全可以在一個(gè)txt文檔里面寫個(gè)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;
        }
    }
}

來自為知筆記(Wiz)

總結(jié)

以上是生活随笔為你收集整理的Echarts自动刷新数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。