【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 ();//這是新建物件需要放到for迴圈裡面,如果放到for迴圈外面,會導致,num數組裡面的所以元素都是同一個值,因為nums.push是操作的指標(自己領悟)
obj.name = values.province_name;
obj.value = values.count;
nums.push(obj);
});
感悟:
1、這確實是最好用的圖示了,官網上沒有說錯,確實非常的好用。
2、在操作的時候發現了一個規律,這個框架程式碼非常的簡單和通用,正如下圖所見,Echarts的佈局程式碼中主要分為6部分,當然還可以新增新的部門,比如標題,在這裡嗎,我們可以直接將這些名詞放到官網的api文件中查詢,這樣可以非常詳細的瞭解相關的屬性。
3、世上無難事只怕有心人。在剛開始接觸的時候,感覺傳資料非常的困難,就是因為我們發現數據是通過陣列傳遞的,想了想就是對程式碼不夠敏感,不如看到“[ ]”的時候,沒想到是陣列的標誌。