ExtJs整合Echarts的示例代码
由于Echarts不提供表格功能，想要实现上图下表，需要自己增加一个table标签。
ExtJs整合Echarts
从Echarts官网下载js文件通过import引用新建一个页面，通过竖直放置的两个div排版，上方预留给Echarts，下方预留给table标签
initPanel:function(){
if(this.panel){
return
}
varpanel=newExt.Panel({
id:'echart',
html:'档案调用次数表
' +'Echarts初始化和数据加载
官方声明一次性只能生成一个echarts，定义相关的样式，并且从后台查询数据提供给echarts
initData:function(id,personName,year){
this.id=id;
vardiv=document.getElementById("mainEchart");
varmyChart=echarts.init(div);
//myChart.showLoading({
//text:"图表数据正在努力加载..."
//});
this.myChart=myChart;
//初始化数据
vardata=[];
varyearStr="";
varflag=false;
varmonthData=[];
varres=QueryData();//调用数据查询，涉及项目名，略
for(vari=0;i的形式显示
show:true,
readOnly:true,
optionToContent:function(opt){
varaxisData=opt.xAxis[0].data;
varseries=opt.series;
vartable=''
+'时间 '
+''
+series[0].name+' '
//+''
//+series[1].name
//+' '
+' ';
for(vari=0,l=axisData.length;i'+axisData[i]
+''+''
+series[0].data[i]+' '
//+''+series[1].data[i]
//+' '
+'';
}
table+=' ';
returntable;
}
},
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',functioneConsole(param){
});
this.tableData(personName,monthData,data)
//表格的加载
}
表格数据的赋值
表格部分就是简单的html赋值，没什么好多讲的，注意拼接完后刷新一下html即可。代码如下：
tableData:function(personName,monthData,data){
//表格部分
varhtml=''
+''
+personName
+'档案调用情况表
'
+''
+'月份 调用次数 ';
//if(monthData.length!=data.length)
//thrownewError("数据条数不对，请检查！");
for(vari=0;i'
+monthData[i]
+''
+data[i]
+''
}
html+=' 以上就可完成数据的联动，希望对大家的学习有所帮助，也希望大家多多支持毛票票。