【Echarts】簡單實現——第一個柱狀圖的實現（在後臺動態獲取資料）
阿新 • • 發佈：2018-12-14
第一次接觸這個東西，感覺還有點濛濛的。經過兩天的努力終於搞明白。下面我用自己的方式實現以下，方便大家理解。
下面是我使用一個簡單的mvc框架來實現這個demo。
效果圖：
步驟：
1、新建一個mvc框架的專案。
2、新建控制器：EchartsBarController
控制器中程式碼如下(部分)：
#region 查詢前臺柱狀圖的資料 public string GetJson() { string sql = "SELECT TOP 10 PreOrgNm as name,COUNT(OrgShortNm) as CountbyorgNM FROM [CRB_TPM].[dbo].[M_OrgRelation] where PreOrgNm is not null and PreOrgNm not like '%作廢%' group by PreOrgNm"; DataTable dt = ExecuteQuery(sql,CommandType.Text); return ToJsonList(dt); } #endregion
3、新建頁面：
程式碼如下
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Content/echarts/echarts.js"></script> <script src="~/Scripts/jquery-1.10.2.min.js"></script> </head> <body> <div id="bar" style="height:500px;"> </div> </body> </html> <script type="text/javascript"></script> <script> //Echarts柱狀圖圖表初始化： var EchartsBar = echarts.init(document.getElementById('bar')); getJson(); //查詢資料 function getJson() { $.ajax({ url: "/EchartsBar/GetJson", type: 'post', success: function (data) { var list = JSON.parse(data); var orgname = []; var count = []; for (var i = 0; i < list.length; i++) { orgname.push(list[i].name); count.push(list[i].CountbyorgNM); } var option=DrawBar(orgname,count,"各地商店數量"); if (option && typeof option === "object") { EchartsBar.setOption(option, true); } } }) } //繪製柱形圖的公共程式碼： function DrawBar(orgname,count,str) { var option = { backgroundColor: '#33CCCC ', title: { text: str, x: 'center', top: 0, textStyle: { color: '#ccc', fontSize: 16 } }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, legend: { top:20,//距離容器上邊距（px） data: ['商店數量柱狀圖（1）', '商店數量柱狀圖（2）', '（商店數量折線圖）'] }, xAxis: [ { type: 'category', data: orgname, axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '數量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value}家' } }, { type: 'value', name: '數量', min: 0, max: 25, interval: 5, axisLabel: { formatter: '{value} 家' } } ], series: [ { name: '商店數量柱狀圖（1）', type: 'bar', data: count }, { name: '商店數量柱狀圖（2）', type: 'bar', data: count }, { name: '（商店數量折線圖）', type: 'line', yAxisIndex: 1, data: count } ] }; return option } </script>
結果：
到此就實現了我們效果圖中的樣子了。
注意事項：
1、需要為每個圖示外層的標籤設定高度和寬度，否則可能導致無法正常顯示。
2、在使用ajax的時候，主要其中的大小寫，在ajax中對大小寫非常的敏感，剛才因為在“url”寫成了“Url”，導致無法訪問後臺資料，總是在ajax報錯。
3、圖示中所有的資料都是通過陣列來傳送的。為此，需要將後臺查詢的資料先放到資料中。
4、如果要是需要將後臺查詢的資料以物件的形式放到陣列中，需要如下程式碼：
var nums=[];
for(i=0,i<list.length,i++){
var obj = new Object 感悟：
1、這確實是最好用的圖示了，官網上沒有說錯，確實非常的好用。
2、在操作的時候發現了一個規律，這個框架程式碼非常的簡單和通用，正如下圖所見，Echarts的佈局程式碼中主要分為6部分，當然還可以新增新的部門，比如標題，在這裡嗎，我們可以直接將這些名詞放到官網的api文件中查詢，這樣可以非常詳細的瞭解相關的屬性。
3、世上無難事只怕有心人。在剛開始接觸的時候，感覺傳資料非常的困難，就是因為我們發現數據是通過陣列傳遞的，想了想就是對程式碼不夠敏感，不如看到“[ ]”的時候，沒想到是陣列的標誌。
