echart折線圖柱形圖資料格式化動態繫結資料 frame處理

阿新 • • 發佈：2019-01-08

var myChart; var eCharts; require.config({ paths : { 'echarts' : '${pageContext.request.contextPath}/路徑', 'echarts/chart/line' : '${pageContext.request.contextPath}/路徑' } }); require

([ 'echarts', 'echarts/chart/line' ], DrawEChart //非同步載入的回撥函式繪製圖表 ); //建立ECharts圖表方法 function DrawEChart(ec) { eCharts = ec; myChart = eCharts.init(document.getElementById('main')); //定義圖表options var options = { title : { text : "次數"

, subtext : "純屬虛構", sublink : "http://www.baidu.com" }, tooltip : { trigger : 'axis' }, legend : { data : [] }, toolbox : { show : true

, feature : { mark : { show : true }, dataView : { show : true, readOnly : false }, magicType : { show : true, type : [ 'line', 'bar' ] }, restore : { show : true }, saveAsImage : { show : true } } }, calculable : true, xAxis : [ { show : true, type : 'category', boundaryGap : false, data : [] } ], yAxis : [ { type : 'value', show : true, splitArea : { show : true } } ], grid : { width : '90%' }, series : [ { show : true, name : '次數', type : 'bar', data : [], //系列中的資料標註內容 markPoint : { data : [ { type : 'max', name : '最大值' }, { type : 'min', name : '最小值' } ] } } ], }; myChart.hideLoading(); myChart.setOption(options); //先把可選項注入myChart中 getChartData();//ajax後臺互動 window.onresize = myChart.resize; }; function getChartData() { //獲得圖表的options物件 var options = myChart.getOption(); //通過Ajax獲取資料 $.ajax({ type : "post", async : false, //同步執行 url : "${pageContext.request.contextPath}/frontUser/login/list_data.do", dataType : "json", //返回資料形式為json success : function(result) { /* console.log(result); */ if (result) { options.legend.data = result[0].legend; options.xAxis[0].data = result[0].category; options.series[0].data = result[0].series; myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("圖表請求資料失敗"); myChart.hideLoading(); } }); }

echart折線圖柱形圖資料格式化動態繫結資料 frame處理

echart折線圖柱形圖資料格式化動態繫結資料 frame處理

Echart--多個柱形圖

echart修改在柱形圖上顯示為0的情況

C# WinForm開發系列之c# 通過.net自帶的chart控制元件繪製餅圖,柱形圖和折線圖的基礎使用和擴充套件

Echarts餅圖柱形圖調整文字大小（java程式碼）

HighChat動態繫結資料資料後臺繫結（四）

JQuery Ajax實現Select多級關聯動態繫結資料

Easyui combobox下拉框動態繫結資料

bootstrap-select下拉框模糊搜尋和動態繫結資料

Developer Express 之 XtraReport如何動態繫結資料

DevExpress 圖表控制元件：ChartControl 動態繫結資料

為RDLC報表動態繫結資料

vue.js關於動態繫結資料

ASP.NET中dropdownlist 動態繫結資料的二種方法

Easyui 下拉列表動態繫結資料 C#

DevExPress控制元件中ComboBoxEdit動態繫結資料

C#利用Lambda和Expression實現資料的動態繫結

前端jquery treeTable動態繫結資料

java實現各種資料統計圖（柱形圖，餅圖，折線圖）

Echart--單個柱形圖

echart折線圖 柱形圖 資料格式化 動態繫結資料 frame處理

相關推薦

echart折線圖柱形圖資料格式化動態繫結資料 frame處理