1.簡單例項：ASP.NET下Echarts通過Ajax從資料庫中獲取資料
阿新 • • 發佈：2019-01-04
後臺：Test01.ashx.cs:從資料庫獲取資料，通過HTTP請求（HttpContext）實現和前臺資料傳遞json資料
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.SqlClient; using System.Data; using System.Web.Script.Serialization; namespace SSF_Echarts_WebApp_01 { ///<summary> /// Summary description for Test011///</summary> public class Test011 : IHttpHandler { SqlConnection con = new SqlConnection("Server=.\\sqlexpress;User Id=sa;Pwd=123456;DataBase=study_01"); DataSet ds = new DataSet(); SqlDataAdapter adapter = new SqlDataAdapter(); JavaScriptSerializer jsS = newJavaScriptSerializer(); List<object> lists = new List<object>(); //Series seriesObj = new Series(); string result = ""; public void ProcessRequest(HttpContext context) { //獲取一同傳送過來的引數 //string command = context.Request["cmd"]; context.Response.ContentType = "text/plain"; //用來傳回去的內容 //context.Response.Write("Hello World"); Get_Data01(context); } public void Get_Data01(HttpContext context) { string sql = @"select Month, data from Table_Echarts_Test_01 where ID<11"; ds = GetDataFromDatabase(sql); lists = new List<object>(); foreach (DataRow dr in ds.Tables[0].Rows) { var obj = new { Month = dr["Month"], data = dr["data"] }; lists.Add(obj); } jsS = new JavaScriptSerializer(); result = jsS.Serialize(lists); context.Response.Write(result); } public DataSet GetDataFromDatabase(string sql) { ds = new DataSet(); adapter = new SqlDataAdapter(sql, con); adapter.Fill(ds); return ds; } public bool IsReusable { get { return false; } } } }
前臺：Test01.aspx:通過Ajax將傳遞過來的json資料在回撥函式中物件化並賦給echarts資料來源。echarts其他引數都可以類似擴充套件，編寫複雜的邏輯。
<script type="text/javascript"> var myChart1 = echarts.init(document.getElementById('main1')); var option1 = { tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, title: { text: '', subtext: '', }, legend: { data: ['data'], right: '5%' }, grid: { left: '5%', right: '0%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', data: [] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'New', type: 'bar', data: [100], markPoint: { data: [ { type: 'max', name: 'Max Value' }, { type: 'min', name: 'Min Value' } ] }, }, ] }; $.ajax({ type: "post", async: false, url: "Test01.ashx", data: { cmd: "test" }, //傳送到伺服器的引數 datatype: "json", success: function (result) { if (result) { eval("var transresult=" + result); //alert(transresult[0].Month); option1.xAxis[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[0].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]; myChart1.setOption(option1); } }, error: function (errorMsg) { alert("request data failed!!!"); } }); </script>