ASP.NET+Echarts+Ajax從資料庫中獲取資料
阿新 • • 發佈:2019-01-05
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; } } }