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+='';
document.getElementById('mainTable').innerHTML=html;
}
以上就可完成数据的联动，希望对大家的学习有所帮助，也希望大家多多支持毛票票。