Echarts使用心得（二）

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的函数，网上很多。
    }

需要注意的是：

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。