Echarts动态加载
前几天简单谈了一下静态echarts,接下来谈谈动态echarts使用。大体上分为以下三个步骤:
- 一、前段jsp页面定义好Echarts
- 二、通过ajax传递数据
- 三、后台处理
jsp代码
<!--根据自己的echarts.js存放路径加载-->
<script src="assets/js/echarts.js"></script>
<!--准备好的dom-->
<div id="main" style="height:400px;padding-top:10px;" ></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var indexdata ={category:[],values:[]};
//定义全局变量indexdata,接收后台传递过来的category和
//values,然后传递给Echarts。
var option = {
title:{
text: '此处填写大标题',
subtext: '此处填写副标题',
x:'center',//x,y表示title的坐标
y:'top',
textStyle:{align:'left',baseline:'middle',fontSize:16,fontWeight:'600',color:'#fff'},
subtextStyle:{align:'left',baseline:'middle',fontSize:12,fontWeight:'400',color:'#fff'}
},
tooltip:{
trigger: 'axis',
axisPointer : {
type: 'shadow'
}
},
legend: {
orient : 'vertical',x : 'left',y:'center',
//x:'center',y:'bottom',
textStyle:{align:'left',baseline:'middle',fontSize:12,fontWeight:'400',color:'#fff'},
data:['新增','更新','废弃']
//data:indexdata.legend
},
toolbox: {
iconStyle:{
normal:{
color:'rgba(99,185,144,0.85)',
shadowColor:'rgba(0,0,0,0.35)',
shadowBlur:10,
opacity:1
},
emphasis:{
color:'rgba(255,255,255,0.85)',
shadowColor:'rgba(0,0,0,0.35)',
shadowBlur:10,
opacity:1
}
},
show : true,
orient : 'vertical',
y: 'center',
feature: {
magicType : {show: true, type: ['line', 'bar', 'tiled']},
restore : {show: true},
saveAsImage : {show: true,type:'png',backgroundColor:'rgba(0,0,0,0.15)'}
}
},
calculable:true,
xAxis : [
{
type : 'category',
axisLine:{show:true,lineStyle:{color: '#fff',width:2,type:'solid'}},
axisLabel:{show:true,textStyle:{color:'#fff'}},
axisTick : { // 轴标记
show:true,
length: 10,
lineStyle: {
color: '#fff',
type: 'solid',
width: 1
}
},
data : []
}
],
yAxis : [
{
type : 'value',
axisLine:{show:true,lineStyle:{color: '#fff',width:2,type:'solid'}},
axisLabel:{show:true,textStyle:{color:'#fff'}},
axisTick : { // 轴标记
show:true,
length: 10,
lineStyle: {
color: '#fff',
type: 'solid',
width: 1
}
},
splitArea : {show : true}
}
],
series : [
{
name:'新增',
type:'bar',
stack: '总量',
data:[],//注意:与静态页面不同的,数据是从后台传过来的
color:['#fff'],//根据个人喜好选择颜色
barMaxWidth: 30
},
{
name:'更新',
type:'bar',
stack: '总量',
data:[],
color:['#000'],
barMaxWidth: 30
},
{
name:'废弃',
type:'bar',
stack: '总量',
data:[],
color:['#fff'],
barMaxWidth: 30
}
]
};
$(function(){
//页面初始化加载所有数据
load();
});
function load(){
$.ajax({
type: "post",
data:{},
url: "reportForms/forms_weeklyForm.action",
**//url填写传数据的后台java文件,我这里是*action.java。**
dataType: "json",
cache: false,
success: function(data) {
// 填入数据
//**值得注意的是:option的数据,就算只有一条记录,也需要写成[0]。**
option.xAxis[0].data = data.categories;
option.series[0].data = data.values0;
option.series[1].data = data.values1;
option.series[2].data = data.values2;
myChart.setOption(option);
},
error:function(data){
//alert(data);
}
});
}
</script>
java代码
后台对应上面jsp页面的函数:
public void weeklyForm() throws Exception{
String[] categories = new String[7];
Calendar cal = Calendar.getInstance();//current日期
for(int i=1 ; i<=7 ; i++){
cal.add(Calendar.DATE, -1);//日期往前1天
categories[7-i] = new SimpleDateFormat( "yyyy-MM-dd ").format(cal.getTime());
}
JSONObject json = new JSONObject();
//通过json.put传递数据到前端jsp。
json.put("categories", categories);
Integer[][] data = new Integer[3][7];
for(int i=0 ; i<3 ; i++){
data[i] = formsService.WeeklyForm(i);
//WeeklyForm()为后台查找数据的函数,根据需求写。
temp = 0;
for(int j=0 ; j<data[i].length ; j++){
if(data[i][j] != null){
temp += data[i][j].intValue() ;
}
}
switch(i){//通过json.put传递数据到前端jsp。
case 0:json.put("values0", data[i]);break;
case 1:json.put("values1", data[i]);break;
case 2:json.put("values2", data[i]);break;
}
}
writeJson(json);//writeJson就是一个写json的函数,网上很多。
}
需要注意的是:
- option的数据,就算只有一条记录,也需要写成[0],例如option.xAxis[0].data。
- json.put(“values0”, data[i])中values0对应jsp页面的data.values0,也就是说put”“引号中的字符必须跟data.后面的字符一致。
- 记得加载echarts.js文件,注意加载路径。echarts.js可以在这里下载http://echarts.baidu.com/download.html。