ExtJs整合整合Echarts的示例代码的示例代码
本篇文章主要介绍了ExtJs整合Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。
一起跟随小编过来看看吧
由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。
ExtJs整合整合Echarts
从Echarts官网下载js文件通过import引用 新建一个页面，通过竖直放置的两个div排版，上方预留给Echarts，下方预留给table
标签
initPanel : function() {
if (this.panel) {
return
}
var panel = new Ext.Panel({
id : 'echart',
html : '<div id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></div>'
+ '<div 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 div = document.getElementById("mainEchart");
var myChart = echarts.init(div);
// 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'
评论0