文档章节

ECharts - Java类库使用

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

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

Liuzh_533
2014/09/22
0
30
基于Django+Bootstrap框架,可视化展示内存监控信息

构思过程:  一开始单纯的写了个内存监控的脚本,每隔5分钟收集服务器的内存信息,然后将收集到的数据写进数据库中,但后来发现就算把收集的信息写入数据库,如果需要查询某个时段的内存信息...

Java架构解析
09/20
0
0
一个关于使用phantomjs导出echarts图片的问题

现在要实现用java直接后台生成echarts图片的功能。思路是使用phantomjs打开页面然后生成图片。我使用 phantomjsdriver1.2.1 的时候是正常的,但是跟我项目中的另一个功能所使用的jar包冲突,...

qiaoaniu
11/08
0
0
利用大数据技术分析新浪财经美股行情

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

teaGod
2017/12/14
0
0
响应式 React Native Echarts 组件

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

entronad
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用 React 和 Vue 创建相同的应用,他们有什么差异?

在工作中应用 Vue 之后,我对它有了相当深刻的理解。 不过,俗话说「外国的月亮比较圆」,我好奇「外国的」 React 是怎么样的。 我阅读了 React 文档并观看了一些教程视频,虽然它们很棒,但...

阿K1225
12分钟前
0
0
如何使用Kubernetes的configmap通过环境变量注入到pod里

在Kubernetes官网里,有这样一篇文章,提到了Kubernetes里的一个最佳实践就是把应用代码同配置信息分开,一种方式就是使用Kubernetes 1.2里引入的configmap概念。 https://kubernetes.io/bl...

JerryWang_SAP
28分钟前
0
0
2天闭门培训|以太坊智能合约从入门到实战(北京)

2天培训 16个课时 探寻技术原理,精通以太坊智能合约开发 以太坊智能合约是现在应用的最广泛的区块链应用开发方式,HiBlock区块链社区针对以太坊智能合约的学习特别推出2天闭门研修班,通过2...

HiBlock
31分钟前
0
0
限定某个目录禁止解析php,限制user_agent,php相关配置

11月20日任务 11.28 限定某个目录禁止解析php 11.29 限制user_agent 11.30/11.31 php相关配置 1.限定某个目录禁止解析php 核心配置文件内容 <Directory /data/wwwroot/www.123.com/upload> p...

hhpuppy
41分钟前
2
0
Spring的好文章

孤傲苍狼 https://www.cnblogs.com/xdp-gacl/p/4249939.html 跟我学spring http://jinnianshilongnian.iteye.com/blog/1413846 SpringIoc 和Spring Aop 代理模式: 静态代理 动态代理 cglib代......

wangwei2134
53分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部