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',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',data:['新增','更新','废弃'] //data:indexdata.legend },toolBox: { iconStyle:{ normal:{ color:'rgba(99,185,144,0.85)',shadowColor:'rgba(0,0.35)',shadowBlur:10,opacity:1 },emphasis:{ color:'rgba(255,255,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.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',splitArea : {show : true} } ],series : [ { name:'新增',type:'bar',stack: '总量',data:[],//注意：与静态页面不同的，数据是从后台传过来的 color:['#fff'],//根据个人喜好选择颜色 barMaxWidth: 30 },{ name:'更新',color:['#000'],barMaxWidth: 30 },{ name:'废弃',color:['#fff'],barMaxWidth: 30 } ] }; $(@H_301_221@function(){ //页面初始化加载所有数据  load(); }); @H_301_221@function load(){ $.ajax({ type: "post",data:{},url: "reportForms/forms_weeklyForm.action",**//url填写传数据的后台java文件，我这里是*action.java。** dataType: "json",cache: false,success: @H_301_221@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:@H_301_221@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的函数，网上很多。
    }

需要注意的是：

1. option的数据，就算只有一条记录，也需要写成[0]，例如option.xAxis[0].data。
2. json.put(“values0”,data[i])中values0对应jsp页面的data.values0，也就是说put”“引号中的字符必须跟data.后面的字符一致。
3. 记得加载echarts.js文件，注意加载路径。echarts.js可以在这里下载http://echarts.baidu.com/download.html。