文档章节

ECharts - Java类库使用

ville
 ville
发布于 2017/04/06 17:04
字数 633
阅读 406
收藏 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
粉丝 11
博文 50
码字总数 39024
作品 0
广州
架构师
【实例教程】Echarts 的 Java 封装类库

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

Liuzh_533
2014/09/22
0
30
响应式 React Native Echarts 组件

一种在 React Native 中封装的响应式 Echarts 组件,使用与示例请参见:react-native-echarts-demo 近年来,随着移动端对数据可视化的要求越来越高,类似 MPAndroidChart 这样的传统图表库已...

entronad
07/12
0
0
利用大数据技术分析新浪财经美股行情

学习大数据技术有一段时间了,之前也写过一些零零散散的博客,作为自己学习的一些记录,不过每篇博客都只是涵盖部分技术。这次想写一篇比较完整的博客,记录一个完整的项目从头到尾生产的过程...

teaGod
2017/12/14
0
0
Spring Boot 全家桶 - SpringBootBucket

Spring Boot 现在已经成为Java 开发领域的一颗璀璨明珠,它本身是包容万象的,可以跟各种技术集成。 本项目对目前Web开发中常用的各个技术,通过和SpringBoot的集成,并且对各种技术通过“一...

一刀
03/05
0
1
阿里年薪50WJAVA工程师转大数据学习路线!

大数据有两个方向,一个是偏计算机的,另一个是偏经济的。你学过Java,所以你可以偏将计算机的。 Java程序员想转大数据可行吗?Java是全世界使用人数最多的编程语言。不少程序员选择Java做为...

JAVA丶学习
04/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
今天
5
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部