1. 程式人生 > >Echarts學習 ——legend中data的動態載入

Echarts學習 ——legend中data的動態載入

下文一柱狀圖為例:

橫座標是月份,縱座標是數值

用    Map<String, Integer> map = new HashMap<String,Integer>();

存放資料庫中查到的值  例如:map.put("一月",100);

  List<String> name = new ArrayList<String>();//////////存放所有的x軸的值(如:一月,二月,三月。。)
  List<Integer> data = new ArrayList<Integer>();////存放x軸上月份所對應的值(如:1,2,4。。。)

 while (it.hasNext()) {
Integer key = (Integer) it.next();
name.add(type);///月份

                        data.add(map.get(key));//對用數值

}

然後

 JSONObject jo = new JSONObject();

jo.put("name",name);//這種方式處理之後,在js中就可以data.name的到x軸上的月份,直接賦予data就可以

jo.put("data",data);

return jo.toString();


這樣在js中你通過ajax請求這個controller時就可以在success方法中這樣寫

,success:function(data){

  data = eval('('+data+')'); 
myEcharts.setOption({                
                xAxis:{

                    data:data.name
                },                
                series:[
                    {    
                        name:"",////這個值就是你一開始設定setOption時的值
                        data:data.data
                    }
                ]
            })

}

ps:上文中map與list的寫法受限於我的表結構。但是肯定會給你一些靈感