本文主要和大家介紹了ExtJs整合Echarts的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能幫助到大家。
由于Echarts不提供表格功能，想要實現上圖下表，需要自己增加一個table標簽。
ExtJs整合Echarts
從Echarts官網下載js文件通過import引用 新建一個頁面，通過豎直放置的兩個p排版，上方預留給Echarts，下方預留給table標簽
initPanel : function() {
if (this.panel) {
return
}
var panel = new Ext.Panel({
id : 'echart',
html : '<p id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></p>'
+ '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">'
+'<label for="mainTable"><h1>檔案調用次數表</h1></label>'
+'<table id="content-table" border="1" style="width:100%;text-align:center;">'
+ '<tr><th>月份</th><th>調用次數</th></tr>',
buttonAlign : 'center',
autoScroll : true,//允許滾動
bodyStyle : 'overflow-x:hidden; overflow-y:scroll'
//開啟豎直滾動條，關閉水平滾動條
});
this.panel = panel;
return this.panel;
}Echarts初始化和數據加載
官方聲明一次性只能生成一個echarts，定義相關的樣式，并且從后臺查詢數據提供給echarts
initdata: function(id, personName, year) {
this.id = id;
var p = document.getElementById("mainEchart");
var myChart = echarts.init(p);
// myChart.showLoading({
// text: "圖表數據正在努力加載..."
// });
this.myChart = myChart;
// 初始化數據
var data = [];
var yearStr = "";
var flag = false;
var monthData = [];
var res = QueryData();//調用數據查詢，涉及項目名，略
for (var i = 0; i < res.json.body.length; i++) {
var map = res.json.body[i];
monthData.push(map.MM);//月份
data.push(map.DYCS);//調用次數
}
var options = {
arg : {
id : this.id
},
noDataLoadingOption : {
text : '暫無數據',
effect : 'bubble',
effectOption : {
effect : {
n : 0
}
}
},
title : {
text : personName + "的檔案調用情況",
x : 'west'
},
tooltip : {
trigger : 'axis'
},
legend : {
data: ['調用次數']
},
toolbox : {
show : true,
feature : {
mark : {
show : true
},
dataView : {
//重寫dataView
//在切換視圖的時候能夠以<table>的形式顯示
show : true,
readonly : true,
optionToContent : function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center" border="1"><tbody><tr>'
+ '<td>時間</td>'
+ '<td>'
+ series[0].name + '</td>'
// + '<td>'
// + series[1].name
// + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>' + '<td>' + axisData[i]
+ '</td>' + '<td>'
+ series[0].data[i] + '</td>'
// + '<td>' + series[1].data[i]
// + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
},
magicType : {
show : true,
type : ['line', 'bar']
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
calculable : true,
xAxis : [{
type : 'category',
data: monthData
}],
yAxis : [{
type : 'value',
splitArea : {
show : true
}
}],
series : [{
name : '調用次數',
type : 'bar',
barWidth : 35,
data: data,
itemStyle : {//修改柱狀圖的顏色并在頂部顯示數值
normal : {
color : '#3575a8',
label : {
show : true,
position : 'top',
formatter : '{c}'//'\n{c}'
}
}
}
}]
};
myChart.setOption(options, true);
myChart.on('click', function eConsole(param) {
});
this.tableData(personName, monthData, data)
//表格的加載
}表格數據的賦值
表格部分就是簡單的html賦值，沒什么好多講的，注意拼接完后刷新一下html即可。 代碼如下：
tabledata: function(personName, monthData, data) {
// 表格部分
var html = '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">'
+'<label for="mainTable"><h1>'
+ personName
+ '檔案調用情況表</h1></label>'
+'<table id="content-table" border="1" style="width: 100%;text-align: center;">'
+ '<tr style="height: 30px;text-align:center;"><th>月份</th><th>調用次數</th></tr>';
// if(monthData.length != data.length)
// throw new Error("數據條數不對，請檢查！");
for (var i = 0; i < data.length; i++) {
html += '<tr style="height: 30px;text-align: center;">'
+'<td id="data-month-'+i+'">'
+ monthData[i]
+ '</td><td id="data-value-'+i+'">'
+ data[i]
+ '</td></tr>'
}
html += '</table></p>';
document.getElementById('mainTable').innerHTML = html;
}相關推薦：
用H5的WebGL如何在同一個界面做出json和echarts圖表
jQuery插件echarts去掉垂直網格線用法詳解
PHP 使用Echarts生成數據統計報表詳解
以上就是ExtJs整合Echarts方法分享的詳細內容，更多請關注php中文網其它相關文章！