文档章节

ECharts - Java类库使用

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

ville

粉丝 21
博文 70
码字总数 53203
作品 0
广州
架构师
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.6K
8
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6.1K
18
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
696
1
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

倒计时一周,HOLOS千人大会即将召开!

8月10日消息,Holos霍洛斯星际云自由能源将于2020年8月17日在深圳召开千人媒体发布会。据了解,此次发布会将请到众多行业领袖、区块链技术精英、数十位国家级专科院士以及多位能源行业重量级...

osc_njd5t1rw
20分钟前
9
0
Goroutine 泄露排查

我们在发布一个 go 应用时,默认都会启用两个 http handler: 一个是 pprof,方便线上动态追踪问题;另外一个是 prometheus 的 metrics,这样就可以通过 grafana 准实时的监控当前 runtime 信...

ms2008
2019/06/03
0
0
如何在Python中打印到stderr? - How to print to stderr in Python?

问题: There are several ways to write to stderr: 有几种写stderr的方法: # Note: this first one does not work in Python 3print >> sys.stderr, "spam"sys.stderr.write("spam\n")......

法国红酒甜
21分钟前
9
0
关于JWT Token 自动续期的解决方案

前言 在前后端分离的开发模式下,前端用户登录成功后后端服务会给用户颁发一个jwt token。前端(如vue)在接收到jwt token后会将token存储到LocalStorage中。 后续每次请求都会将此token放在请...

飘渺Jam
07/16
12
0
5G时代会不会导致编程语言大灭绝,JS的前景是否会更好-诺禾

首先,5G打开了工业互联网的大门,同时5G也会推动一系列技术的发展,包括物联网、大数据、边缘计算、人工智能等等,而这些技术的发展又会推动各种技术平台的发展,从而形成以技术平台为基础来...

osc_jo2m8l1r
21分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部