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=' ' +' '; for(vari=0,l=axisData.length;i时间 ' +'' +series[0].name+' ' //+'' //+series[1].name //+' ' +''+' '; 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) //表格的加载 }'+axisData[i] +' '+'' +series[0].data[i]+' ' //+''+series[1].data[i] //+' ' +''; } table+='
表格数据的赋值
表格部分就是简单的html赋值,没什么好多讲的,注意拼接完后刷新一下html即可。代码如下:
tableData:function(personName,monthData,data){ //表格部分 varhtml='' +' ' +personName +'档案调用情况表
' +'' +' 月份 调用次数 '; //if(monthData.length!=data.length) //thrownewError("数据条数不对,请检查!"); for(vari=0;i' +' ' +monthData[i] +' ' +data[i] +'' } html+='
以上就可完成数据的联动,希望对大家的学习有所帮助,也希望大家多多支持毛票票。