java中给echarts图表动态赋值详解

之前项目中给echarts动态填充数据，做了很多无用功，最终结果是实现了，但是代码臃肿，逻辑复杂，让人一眼看不到尽头，摸不着头脑。经过多次使用echarts，项目中总结和网上资料查询，最终总结如下，不喜勿喷。

思路：将我们要展示的图表数据封装成对应图表所需要的数据结构。

echarts需要的数据结构基本就两种：1、[11, 11, 15, 13, 12, 13, 10]；2、{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'}, {value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]，都是数组，只是前者里面保存数值，后者里面保存对象。一般前者用于折线，柱状等图，后者用于饼状，地图等的数据。

在开始封装数据之前，先说封装好的数据怎样赋值给echarts，如下：下面的是直接赋值的方式；也可以将option包含在function中，用参数作为值，调用方法，给方法赋值进行echarts数据填充。

 

开始封装数据：

1、数组中是数值；

在后台：直接创建List<Object>，传到前台进行赋值。

在前台： var applist = data.appList; // 异步方法获取传来的list。
                 var seriesxApp=new Array(); // 创建X轴的数组；
                 var seriesyApp=new Array();// 创建Y轴的数组；
                 for(var i=0;i<applist.length;i++){ // 循环后台传来的数据
                     seriesxApp[i]=applist[i].sutime; // 给X轴数组赋值
                     seriesyApp[i]=applist[i].loginNum;// 给Y轴数组赋值
                 }

2、数组中是对象（value-name的形式）：

后台：Map<String,Object> map = new HashMap<String, Object>(); // 用于保存封装好的数据
              JSONArray data = new JSONArray(); // 创建json数组 
              for(int i = 0; i < resourceData.size(); i++){ // 循环查询出来图表的数据 
                  JSONObject jo = new JSONObject();  // 创建json对象
                  // 给对象的name属性赋值
                  jo.put("name", resourceData.get(i).get("local_name").toString().replace("市", "").replace("省", "")); 
                  // 给对象的value属性赋值
                  jo.put("value", resourceData.get(i).get("local_total").toString()); 
                  // 将json对象保存到json数组中
                  data.add(jo);
              }  
              // 封装好的数据保存map传到前台进行赋值
              map.put("resourceData", data); 

根据自己经验总结，如有不对的地方，欢迎交流，交流是人类进步的催化剂！！！