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)