1. 程式人生 > >ASP.NET+Echarts+Ajax從資料庫中獲取資料

ASP.NET+Echarts+Ajax從資料庫中獲取資料

html

                        <div class="panel-body">
                            <div id="signNum" style="height: 400px; width: 100%"></div>
                        </div>

js

var firstChart = echarts.init(document.getElementById('signNum'));
option1 = {

    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['出勤率', '評價率']
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['保定', '承德', '廊坊', '滄州', '唐山', '秦皇島', '古韻', '盛典', '邢臺', '衡水', '張家口', '邯鄲']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '出勤率',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        },
        {
            name: '評價率',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
    ]
};
$.ajax({
    type: "post",
    async: false,
    url: "ashx/test.ashx?action=option1",
    data: { cmd: "test" }, //傳送到伺服器的引數
    datatype: "json",
    success: function (result) {
        if (result) {
            //alert(result);
            eval("var transresult=" + result);
            //alert(transresult[0].Month);
            option1.series[0].data = [transresult[0].Month, transresult[1].Month, transresult[2].Month, transresult[3].Month, transresult[4].Month, transresult[5].Month, transresult[6].Month, transresult[7].Month, transresult[8].Month, transresult[9].Month];
            option1.series[1].data = [transresult[0].data, transresult[1].data, transresult[2].data, transresult[3].data, transresult[4].data, transresult[5].data, transresult[6].data, transresult[7].data, transresult[8].data, transresult[9].data];
            firstChart.setOption(option1);
        }
    },
    error: function (errorMsg) {
        alert("request data failed!!!");
    }
});
var secondcharts = echarts.init(document.getElementById('schoolArea'));

ashx

public class test : IHttpHandler
{
    JavaScriptSerializer jsS = new JavaScriptSerializer();
    List<object> lists = new List<object>();
    //Series seriesObj = new Series();
    string result = "";
    database db = new database("System");
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string action = context.Request["action"].ToString();
        switch (action)
        {
            case "option1":
                Get_Data01(context);
                break;
        }
    }
    public void Get_Data01(HttpContext context)
    {
        string sql = "select * FROM [jiaowu].[dbo].[T新聞]";
        DataTable dt = db.GetDataTable(sql);
        lists = new List<object>();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            var obj = new { Month = dt.Rows[i]["編號"], data = dt.Rows[i]["型別"] };
            lists.Add(obj);
        }
        jsS = new JavaScriptSerializer();
        result = jsS.Serialize(lists);
        context.Response.Write(result);
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}