文档章节

ECharts - Java类库使用

ville
 ville
发布于 2017/04/06 17:04
字数 633
阅读 447
收藏 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>

© 著作权归作者所有

共有 人打赏支持
ville
粉丝 14
博文 52
码字总数 39455
作品 0
广州
架构师
私信 提问
ECharts-Java 类库 2.1.8 版本发布

本项目是一个为了便于在Java中使用ECharts的类库,不是ECharts本身,也不是官方提供的Java类库。 双11的时候ECharts更新到了2.1.8版本,更新增加了大量内容。 为了便于使用对应版本的ECchart...

Liuzh_533
2014/12/02
8.5K
11
ECharts-Java 类库 2.2.0.3 版本发布

本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Series,包含Bar-柱状图,Line-折线图,P...

Liuzh_533
2015/06/03
2.7K
6
ECharts-Java 类库 2.2.6 版本发布

ECharts - Java类库 当前版本2.2.6 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Java中构造ECharts中可能用到的全部数据结构,如完整的结构Option。Option中的数据Serie...

Liuzh_533
2015/07/16
4.6K
13
【实例教程】Echarts 的 Java 封装类库

Echarts 的 Java 封装类库:[http://www.oschina.net/p/echarts-java][1] 没想到喜欢Echarts 的 Java 封装类库的人还挺多,在源码中的测试例子一般目的只是构造官网例子的结构,这里写个比较...

Liuzh_533
2014/09/22
0
30
ECharts - Java 类库 1.0.0 发布

这是一个针对 ECharts 2.0 版本的Java类库,实现了所有ECharts中的Json结构对应的Java对象,并且可以很方便的创建Option 本项目是一个供Java开发使用的ECharts的开发包,主要目的是方便在Jav...

Liuzh_533
2014/09/19
6K
24

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
8
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部