ECharts 從後臺動態獲取數據（asp.net）

時間 2020-06-17

標籤 echarts 後臺動態獲取數據 asp.net asp 欄目 ASP 简体版

原文原文鏈接

(一) 使用工具 visual studio 2017；Web開發：asp.netjavascript

（代碼中的js引用路徑以及ajax方法調用的url，記得修改哦）html

(二) 準備工做（此處寫給和我同樣小白）java

　　1.動態從後臺獲取數據，需使用Ajax獲取後臺Json，爲此咱們須要作一些準備工做，安裝兩個包（在vs的NuGet包管理）jquery

一個json的包，一個mvc的包。web

　　2.添加必要的js。ajax

　　ECharts和jQuery都可在各自官網下載到。Echarts依賴zrender，但好像項目中是否引用並不影響。原諒我對Echarts還只是初識，理解不夠深入。數據庫

(三) 開始吧~json

而後如今開始咱們的小練習。數組

先準備一個Series類mvc

 1 using System;  2 using System.Collections.Generic;  3 using System.Linq;  4 using System.Web;  5 
 6 /// <summary>
 7 /// Series 的摘要說明  8 /// </summary>
 9 public class Series 10 { 11     public string name; 12     public string type; 13     public int yAxisIndex; 14     public List<double> data; 15 }

Series

而後咱們添加一個web服務

是的，就是這個~ 我給的名字叫 wsComm

（VS很智能的告訴我要取消以下注釋，然而我一開始仍然沒有看到，瞎了大概）

而後咱們須要在這裏面寫一個webmethod，以便在前臺進行數據獲取（關於webmethod的問題，這裏不作詳述）。

 1 /// <summary>
 2 /// wsComm 的摘要說明  3 /// </summary>
 4 [WebService(Namespace = "http://tempuri.org/")]  5 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  6 // 若要容許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消註釋如下行。 
 7 [System.Web.Script.Services.ScriptService]  8 public class wsComm : System.Web.Services.WebService  9 { 10 
11     /// <summary>
12     /// ECharts圖表數據獲取 13     /// </summary>
14     /// <returns></returns>
15  [WebMethod] 16     public JsonResult getdataechart() 17  { 18         //考慮到圖表的category是字符串數組 這裏定義一個string的List
19         List<string> categoryList = new List<string>(); 20         //考慮到Echarts圖表須要設置legend內的data數組爲series的name集合這裏須要定義一個legend數組
21         List<string> legendList = new List<string>(); 22         //考慮到圖表的series數據爲一個對象數組 這裏額外定義一個series的類
23         List<Series> seriesList = new List<Series>(); 24         //設置legend數組
25         legendList.Add("月支出金額"); //這裏的名稱必須和series的每一組series的name保持一致
26         legendList.Add("月工做量"); //這裏的名稱必須和series的每一組series的name保持一致 27         //填寫第一個Series 28         //定義一個Series對象
29         Series seriesObj = new Series(); 30         seriesObj.name = "月支出金額"; 31         seriesObj.type = "line"; //線性圖呈現
32         seriesObj.data = new List<double>(); //先初始化 不初始化後面直直接data.Add(x)會報錯 33 
34         //模擬兩組數據，都放在二組數組中。該數據你能夠從數據庫中獲取，關於如何從後臺數據庫進行讀取，本文再也不詳述。
35         string[,] MonthCost = new string[,] { { "201701", "10110020" }, { "201702", "2000000" }, { "201703", "3500000" }, { "201704", "4590876" }, { "201705", "5809833" }, { "201706", "5309902" }, { "201707", "7388332" }, { "201708", "2000000" }, { "201709", "19879802" }, { "2017010", "2378945" } }; 36         string[,] ProjectVal = new string[,] { { "201701", "3000" }, { "201702", "7500" }, { "201703", "9500" }, { "201704", "10000" }, { "201705", "12000" }, { "201706", "10050" }, { "201707", "30050" }, { "201708", "7893" }, { "201709", "7312" }, { "2017010", "8905" } }; 37         //設置數據 
38         for (int i = 0; i < 10; i++) 39  { 40             //加入category刻度數組
41             categoryList.Add(MonthCost[i, 0]); 42             //加入數據值series序列數組 這裏提供爲了效果只提供一組series數據好了 
43             seriesObj.data.Add(Convert.ToDouble(MonthCost[i, 1])); //數據依次遞增
44  } 45  seriesList.Add(seriesObj); 46         //填寫第二個Series
47         seriesObj = new Series(); 48         seriesObj.name = "月工做量"; 49         seriesObj.type = "bar"; //線性圖呈現
50         seriesObj.yAxisIndex = 1; 51         seriesObj.data = new List<double>(); //先初始化 不初始化後面直直接data.Add(x)會報錯 52         //設置數據 
53         for (int i = 0; i < 10; i++) 54  { 55             seriesObj.data.Add(Convert.ToDouble(ProjectVal[i, 1])); //數據依次遞增
56  } 57  seriesList.Add(seriesObj); 58         //最後調用相關函數將List轉換爲Json 59         //由於咱們須要返回category和series、legend多個對象 這裏咱們本身在new一個新的對象來封裝這兩個對象
60         JsonResult json = new JsonResult(); 61         var newObj = new
62  { 63             category = categoryList, 64             series = seriesList, 65             legend = legendList 66  }; 67         json.Data = JsonConvert.SerializeObject(newObj); 68         return json; 69  } 70 }

wsComm

　　前臺：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <script type="text/jscript" src="../JS/jquery-3.3.1.js"></script>
 5     <script type="text/jscript" src="../JS/echarts.js"></script>
 6     <title></title>
 7 </head>
 8 <body>
 9     <form id="form1" runat="server">
10         <div id="main" style="height: 400px"></div>
11         <script type="text/javascript">
12             var myChart = echarts.init(document.getElementById('main')); 13             //圖表顯示提示信息
14  myChart.showLoading({ 15                 text: "圖表數據正在努力加載..."
16  }); 17             //定義圖表options
18             var options = { 19  title: { 20                     text: "測試報表1", 21  }, 22                 //右側工具欄
23  toolbox: { 24                     show: true, 25  feature: { 26                         mark: { show: true }, 27                         dataView: { show: true, readOnly: false }, 28                         magicType: { show: true, type: ['line', 'bar'] }, 29                         restore: { show: true }, 30                         saveAsImage: { show: true } 31  } 32  }, 33  tooltip: { 34                     trigger: 'axis'
35  }, 36  legend: { 37  data: [] 38  }, 39                 calculable: true, 40  xAxis: [ 41  { 42                         type: 'category', 43                         name: '月份', 44  data: [] 45  } 46  ], 47  yAxis: [ 48  { 49                         type: 'value', 50                         name: '金額', 51  axisLabel: { 52                             formatter: '{value} Y'
53  }, 54                         splitArea: { show: true } 55  }, 56  { 57                         type: 'value', 58                         name: '工做量', 59  axisLabel: { 60                             formatter: '{value} M3'
61  }, 62                         splitArea: { show: true } 63  } 64  ], 65  series: [] 66  }; 67             //經過Ajax獲取數據
68  $.ajax({ 69                 type: "POST", 70                 async: false, 71                 contentType: 'application/json; charset=utf-8', 72                 url: "../wsComm.asmx/getdataechart", 73                 dataType: "json", //返回數據形式爲json
74  success: function (result) { 75                     var obj = JSON.parse(result.d.Data); //必定要注意大小寫，本語句中，一直把Data寫成data，老是取不出數據，耽誤了半天 
76                     if (result) { 77                         //將返回的category和series對象賦值給options對象內的category和series 78                         //由於xAxis是一個數組 這裏須要是xAxis[i]的形式
79                         options.yAxis[0].data = obj.value; 80                         options.xAxis[0].data = obj.category; 81                         options.series= obj.series; 82                         options.legend.data = obj.legend; 83  myChart.hideLoading(); 84  myChart.setOption(options); 85  } 86  }, 87  error: function (XMLHttpRequest, textStatus, errorThrown) { 88  alert(XMLHttpRequest.responseText); 89  alert(XMLHttpRequest.status); 90  alert(XMLHttpRequest.readyState); 91  alert(textStatus); 92  } 93  }); 94         </script>
95     </form>
96 </body>
97 </html>