ECharts - Java类库使用
博客专区 > ville 的博客 > 博客详情
ECharts - Java类库使用
ville 发表于9个月前
ECharts - Java类库使用
  • 发表于 9个月前
  • 阅读 252
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

构建区域数据echart有两种实现方案

1. 在前台写大量的javascript,然后把变量通过ajax或者遍历集合的方式插进去生成图表。 

2.通过echart-java库构建后台处理数据对象,然后ajax交互生成图表。

  • 优缺点分析
  • a.通过javascipt构建区域数据报表,主要工作在前端写javascript开发难度不大,根据官方提供案例很快上手,但这样子一旦某一页面的图表一多,就会异常混乱,且大量javascript不太容易维护。
  • b.ehcart-java 构建区域数据报表,主要在后端处理组装数据,需要对java core 比较熟悉开发方便,便于做成相应组件提供给其它服务使用,前端通过ajax交互,但开发相对慢点。
  • echart-java 库构建区域数据报表
  • 1.ehcart-java 是开源项目,可以从com.github.abel533获取以及相应javadoc文档
  • 2.构建Map
  •  1.在后台进行完美封装传回一个option在前台接收了并set进option即可。API调用demo。          
    • public String initMap (HttpServletRequest request) {
      //Map<String,Long> dataMap = new IdentityHashMap<String,Long>();
      List<AreaVisitEntity> list = new ArrayList<AreaVisitEntity>();
      Option option = new GsonOption();//此处需要用GsonOption
      EMap map = new EMap("PV");
      option.title().text("O2O电商平台区域访问量").textAlign(X.left);
      option.title().left("center");
      option.tooltip().trigger(Trigger.item);
      option.legend().orient(Orient.vertical).left("left");
      option.legend().data(new Object[]{"PV","UV"}); //这里待优化,动态获取
      map.mapLocation(new MapLocation(X.left, Y.top, 600));
      map.selectedMode(SelectedMode.single);
      map.itemStyle().normal().borderWidth(2).borderColor("skyblue").color("orange").label().show(true);
      map.itemStyle().emphasis().borderWidth(2).borderColor("#fff").color("#32cd32").label().show(true).textStyle().color("#fff");
      list = (List<AreaVisitEntity>) areaVisitService.getAreaVisits();
      Data data = null;
      if (null!= list&&!list.isEmpty()) {
      for (AreaVisitEntity areaVisits : list) {
      data = new Data(areaVisits.getRegionAlias(),areaVisits.getPv());
      //modelMap.put(areaVisits.getRegionAlias(), list.get(1).getPv());
      data.itemStyle().normal().color("#32cd32").label().show(true).textStyle().color("#fff").fontSize(15);
      data.itemStyle().emphasis().borderColor("yellow").color("#cd5c5c").label().show(false).textStyle().color("blue");
      //map.markPoint().itemStyle().normal().color("skyblue");
      map.data(data);
      }
      }
      option.animation(true);
      option.series(map);
      JSONObject jsonObj = JSONObject.fromObject(option.toString()); //需要转成json否则绘图不成功
      return jsonObj.toString();
      }
      2.页面进行交互以及渲染图表(注意红色部分顺序,否则绘图不成功)

      <div class="easyui-layout" fit="true">
      <div region="center" style="padding: 1px;"></div>
      <div id="main" style="float:left;height:500px;width:620px;padding:0px;"></div> 
      <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> 
      <script type="text/javascript" src="plug-in/jquery/jquery-1.8.3.min.js"></script>
      <script type="text/javascript"> 
      //初始化图表
      function drawEChart (){
      var myChart = echarts.init(document.getElementById('main')); 
      myChart.showLoading({text: '图表数据正在努力加载...',});
      $.ajax({
      type : 'post',
      url : 'areaVisitController.do?initMap',
      dataType: 'json',
      success : function(data){
      //注意此处需要这样解析提取数据,否则会出错,具体有待研究
      var data = eval("("+data+")");
      myChart.setOption(data); 
      myChart.hideLoading(); 
      },
      error : function (errMsg){
      alert("图表请求数据失败,请稍后重新刷新!"); 
      }
      });
      }
      //init
      $(function(){
      drawEChart(); 
      }); 
      </script> 
      </div>

共有 人打赏支持
粉丝 5
博文 37
码字总数 28813
×
ville
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: