echarts在.Net中使用实例(二) 使用ajax动态加载数据
生活随笔
收集整理的這篇文章主要介紹了
echarts在.Net中使用实例(二) 使用ajax动态加载数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通過上一篇文章可以知道和echarts參考手冊可知，series字段就是用來存儲我們顯示的數據，所以我們只需要用ajax來獲取series的值就可以.
option
| {color}backgroundColor | 全圖默認背景，(詳見backgroundColor)，支持rgba，默認為無，透明 |
| {Array}?color | 數值系列的顏色列表，(詳見color)，可配數組，eg：['#87cefa', 'rgba(123,123,123,0.5)','...']，當系列數量個數比顏色列表長度大時將循環選取 |
| {boolean}renderAsImage | 非IE8-支持渲染為圖片，(詳見renderAsImage) |
| {boolean}calculable | 是否啟用拖拽重計算特性，默認關閉，(詳見calculable，相關的還有?calculableColor，?calculableHolderColor，nameConnector，?valueConnector) |
| {boolean}animation | 是否開啟動畫，默認開啟，(詳見?animation，相關的還有?addDataAnimation，?animationThreshold，animationDuration，?animationDurationUpdate?，?animationEasing) |
| {Object}?timeline | 時間軸(詳見timeline)，每個圖表最多僅有一個時間軸控件 |
| {Object}?title | 標題(詳見title)，每個圖表最多僅有一個標題控件 |
| {Object}?toolbox | 工具箱(詳見toolbox)，每個圖表最多僅有一個工具箱 |
| {Object}?tooltip | 提示框(詳見tooltip)，鼠標懸浮交互時的信息提示 |
| {Object}?legend | 圖例(詳見legend)，每個圖表最多僅有一個圖例，混搭圖表共享 |
| {Object}dataRange | 值域選擇(詳見dataRange),值域范圍 |
| {Object}dataZoom | 數據區域縮放(詳見dataZoom),數據展現范圍選擇 |
| {Object}roamController | 漫游縮放組件(詳見roamController),搭配地圖使用 |
| {Object}?grid | 直角坐標系內繪圖網格(詳見grid) |
| {Array | Object}xAxis | 直角坐標系中橫軸數組(詳見xAxis)，數組中每一項代表一條橫軸坐標軸，標準(1.0)中規定最多同時存在2條橫軸 |
| {Array | Object}yAxis | 直角坐標系中縱軸數組(詳見yAxis)，數組中每一項代表一條縱軸坐標軸，標準(1.0)中規定最多同時存在2條縱軸 |
| {Array}?series | 驅動圖表生成的數據內容(詳見series)，數組中每一項代表一個系列的特殊選項及數據 |
首先定義一個Serial類
/// <summary>/// 定義一個Series類 設置其每一組sereis的一些基本屬性/// </summary>class Series{/// <summary>/// sereis序列組id/// </summary>//public int id//{// get;// set;//}/// <summary>/// series序列組名稱/// </summary>public string name{get;set;}/// <summary>/// series序列組呈現圖表類型(line、column、bar等)/// </summary>public string type{get;set;}/// <summary>/// series序列組的數據為數據類型數組/// </summary>public List<double> data{get;set;}}接著將Serial實例化并將其轉化為json格式(必須用大神器：Newtonsoft.Json.dll)，代碼如下圖
private void ShowChart(){//考慮到圖表的series數據為一個對象數組 這里額外定義一個series的類List<Series> seriesList = new List<Series>();Series series1 = new Series();series1.name = "actual";series1.type = "bar";series1.data = new List<double>(){ 26061649.1, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 0.00, 0.00, 0.00, 0.00, 0.00, 0.00 };Series series2 = new Series();series2.name = "Budget";series2.type = "bar";series2.data = new List<double>() { 28176503.36, 26161649.41, 21782199.14, 27749708.51, 8819500.47, 27711342.26, 2777777.00, 0.00, 0.00, 0.00, 0.00, 0.00, };seriesList.Add(series1);seriesList.Add(series2);var newObj = new{series = seriesList};string strJson = ToJson(newObj);WriteJson(strJson);}public static string ToJson( object obj){return NewtonsoftJson(obj);}public static string NewtonsoftJson(object obj){return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);}private static void WriteJson(string str){HttpContext.Current.Response.Write(str);//HttpContext.Current.Response.ContentType = "text/plain"; //設置MIME格式HttpContext.Current.Response.End();}前臺代碼只需要用ajax來獲取值并賦給option的serial屬性即可
<!DOCTYPE html> <html> <head><meta charset="utf-8" /><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript" src="echarts/echarts.js"></script></head><body><div id="main" style=" height:400px;"></div></body> </html> <script type="text/javascript">// 路徑配置require.config({paths: {echarts: 'echarts'}});// 使用require(['echarts','echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載],function (ec) {// 基于準備好的dom，初始化echarts圖表var myChart = ec.init(document.getElementById('main'));var option = {tooltip: {show: true},legend: {data: ['Actual', 'Budget']},xAxis: [{type: 'category',data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']}],yAxis: [{type: 'value'//Y軸顯示的類型,默認為value}],series: []};//ajax動態獲取數據$.ajax({type: 'post',url: 'ajax.ashx?action=ShowChart',data: {},dataType: 'json',async: false,success: function (result) {if (result) {// 獲取json值option.series = result.series;// 為echarts對象加載數據 myChart.setOption(option);} },error: function () {alert("Error");}});});</script>所見即所得
當然，最后奉上源碼！
源代碼下載
總結
以上是生活随笔為你收集整理的echarts在.Net中使用实例(二) 使用ajax动态加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 租房含一年取暖费怎么算？
- 下一篇： java设计模式之外观模式（门面模式）