前端之家收集整理的这篇文章主要介绍了
ExtJs整合Echarts的示例代码，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。
ExtJs整合Echarts
从Echarts官网下载js文件通过import引用 新建一个页面，通过竖直放置的两个div排版，上方预留给Echarts，下方预留给table标签
var panel = new Ext.Panel({
id : 'echart',html : '<div id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;">
'
- '<div id="mainTable" style="position:relative;text-align:center;padding:10px;">'
+'<label for="mainTable">'
+'<table id="content-table" border="1" style="width:100%;text-align:center;">'
- '<tr>
| 月份 | 调用次数 | </tr>',buttonAlign : 'center',autoScroll : true,//允许滚动
bodyStyle : 'overflow-x:hidden; overflow-y:scroll'
//开启竖直滚动条，关闭水平滚动条
});
this.panel = panel;
return this.panel;
}
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">
<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 += '
</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}'//'{b}\n{c}'
}
}
}
}]
};
myChart.setOption(options,true);
myChart.on('click',function eConsole(param) {
});
this.tableData(personName,monthData,data)
//表格的加载
}
