http://www.cnblogs.com/moonache/p/4661058.html

charts自动刷新数据 转

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)

 

作者：Moonache 
出处：http://www.cnblogs.com/moonache/ 
本文版权归作者和博客园共有，欢迎