devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ECharts3笔记--使用Java快速开发ECharts图表_baroption baroption = new baroption();

作者：花生_TL007 | 2024-03-12 17:43:15

赞

踩

baroption baroption = new baroption();

推荐资源：https://github.com/abel533/ECharts   

 

本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构Option。Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的所有图表。支持所有的Style类，如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支持多种Data数据类型，一个通用的Data数据，以及PieData,MapData,ScatterData,KData等针对性的数据结构。

 

Echart-java 使用Java快速开发ECharts图表。

http://mvnrepository.com/artifact/com.github.abel533/ECharts  Echart-x.x.x.jar 

建议使用3.0后的版本，不需要AMD依赖，像正常的jar包引入即可。

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

 

下面简单讲下步骤，然后就贴出源码，供大家参考哈~跟多例子，请看官网-

 

 

2.开发步骤：跟引入普通的js文件类似

（1）引入ECharts文件

（2）为ECharts准备一个具备大小宽高的DOM容器

（3）基于转备好的dom,初始化echarts实例

（4）制定图表的配置项和数据

（5）使用刚制定的配置项和数据显示图表

 

静态展示例子：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta  charset="UTF-8">
  5. <title>ECharts 样例</title>
  6.  <!-- 1.引入echarts文件 -->
  7. <!--下载好echart的js文件，像普通的js引入即可,也可引入在线的js-->
  8. <script  type="text/javascript"  src="./js/echarts.js"></script>
  9. </head>
  10. <body>
  11. 	<!-- 2.为ECharts准备一个具备大小宽高的DOM容器 -->
  12. 	<div  id="main" style="width: 600px; height: 600px;"></div>
  13. 	<script  type="text/javascript">
  14. 		/* 3.初始化echarts实例 */
  15. 		var myChart = echarts.init(document.getElementById("main"));
  16. 		/* 4.设置图表的配置信息和数据，setOption用指定数据绘图 */
  17. 		var option={
  18. 			tooltip : {
  19. 				show : true
  20. 			},
  21.  
  22. 			legend : {
  23. 				data : [ '销量' ]
  24. 			},
  25.  
  26. 			xAxis : [ {
  27. 				type : 'category',
  28. 				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
  29. 			} ],
  30.  
  31. 			yAxis : {
  32. 				type : 'value'
  33. 			},
  34.  
  35. 			series : [ {
  36. 				name : "销量",
  37. 				type : "bar",
  38. 				data : [ 5, 20, 40, 10, 10, 20 ]
  39. 			} ]
  40. 		};
  41. 		
  42. 		myChart.setOption(option);
  43. 	</script>
  44. </body>
  45. </html>

 

 

 

 

模拟动态获取数据库的例子。以jfinal框架为例：记得下载echarts.jar

 

  1. import java.util.ArrayList;
  2. import java.util.HashMap;
  3. import java.util.List;
  4. import java.util.Map;
  5. import java.util.Random;
  6. import com.github.abel533.echarts.Option;
  7. import com.github.abel533.echarts.axis.CategoryAxis;
  8. import com.github.abel533.echarts.axis.ValueAxis;
  9. import com.github.abel533.echarts.code.Trigger;
  10. import com.github.abel533.echarts.data.PieData;
  11. import com.github.abel533.echarts.json.GsonUtil;
  12. import com.github.abel533.echarts.series.Bar;
  13. import com.github.abel533.echarts.series.Pie;
  14. import com.jfinal.core.Controller;
  15.  
  16. public class IndexController extends Controller {
  17.  
  18. public void index() {
  19. String optionStr= GsonUtil.format(selectRemoveCauses());
  20. setAttr("option", optionStr);
  21. render("index.html");
  22. }
  23.  
  24.  
  25.  
  26. public Option selectRemoveCauses(){
  27.  
  28.     //查询前20
  29.     //数据库查询获取统计数据
  30.     List<Map<String, Object>> list =new ArrayList<>();
  31.  
  32.     for(int i=0;i<10;i++) {
  33.     Map<String, Object> map=new HashMap<>();
  34.     map.put("NAME", "张三"+i);
  35.     map.put("TOTAL", new Random().nextInt(50));
  36.     list.add(map);
  37.     }
  38.  
  39.    
  40.     //创建Option
  41.     Option option = new Option();
  42.     option.title("剔除药品").tooltip(Trigger.axis).legend("金额（元）");
  43.     //横轴为值轴
  44.     option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
  45.     //创建类目轴
  46.     CategoryAxis category = new CategoryAxis();
  47.  
  48.     //柱状数据
  49.     Bar bar = new Bar("金额（元）");
  50.     //饼图数据
  51.     Pie pie = new Pie("金额（元）");
  52.  
  53.     //循环数据
  54.     for (Map<String, Object> objectMap : list) {
  55.         //设置类目
  56.         category.data(objectMap.get("NAME"));
  57.         System.out.println(objectMap.get("NAME"));
  58.         //类目对应的柱状图
  59.         bar.data(objectMap.get("TOTAL"));
  60.         //饼图数据
  61.         System.out.println(objectMap.get("TOTAL"));
  62.         pie.data(new PieData(objectMap.get("NAME").toString(), objectMap.get("TOTAL")));
  63.     }
  64.  
  65.     //设置类目轴
  66.     option.yAxis(category);
  67.     //饼图的圆心和半径
  68.     pie.center(900,380).radius(100);
  69.     //设置数据
  70.     option.series(bar, pie);
  71.     //由于药品名字过长，图表距离左侧距离设置180，关于grid可以看ECharts的官方文档
  72.     option.grid().x(180);
  73.     //返回Option
  74.     return option;
  75. }
  76.  
  77. }

 //记得为div设置一个宽高放图表

Html 中<div id="lring"  style=“width: 400px;

height: 85%;background: #fff;”></div>

 

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('lring'));

var option =#(option);

myChart.setOption(option);

</script>

 

最后：给一些笔记：

 

 

Echarts.init()初始化Echarts实例

setOption用指定数据绘图

Option对象

标题：title

图例：legend

X轴：xAxis

Y轴：yAxis

数据：series：Name/type/data

 

option 项中的配置：

tooltip 提示框，鼠标悬浮交互时的信息提示。

trigger:  触发类型

formatter: 正则设置格式 提示框浮层内容格式器

legend: 图例组件

series：系列列表

 

Axis - 坐标轴

Grid - 网格

Title - 标题

Tooltip - 提示框

Legend - 图例组件

DataZoom - 数据区域缩放

DataRange - 值域漫游

Toolbox - 工具箱（内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。）

 

Timeline - 时间线

visualMap - 视觉映射组件

 

textStyle: {

        fontSize: 18,

        fontWeight: 'bolder',

        color: '#333'          // 主标题文字颜色

    },

    subtextStyle: {

        color: '#aaa'          // 副标题文字颜色

    }

 

  center:['30%','50%'],  //设置饼的原心坐标 不设置就会默认在中心的位置 (Object width, Object height）

  radius : ['50%', '70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形

 

ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。

例如阴影的样式可以通过下面几个配置项设置：

itemStyle :  //图形样式

itemStyle: {

    normal: {

        // 阴影的大小

        shadowBlur: 200,

        // 阴影水平方向上的偏移

        shadowOffsetX: 0,

        // 阴影垂直方向上的偏移

        shadowOffsetY: 0,

        // 阴影颜色

        shadowColor: 'rgba(0, 0, 0, 0.5)'

    }

}

 

 

Node Package Manager  节点的软件包管理器（简称npm）

Option正式代码中使用，不需要任何依赖。

GsonOption正式代码中可以使用，需要引入Gson包，使用toString()方法可以转换为JSON结构的数据（支持function，详情看下面的function说明）。

EnhancedOption测试专用，主要方便在浏览器中直接查看效果。

使用GsonOption,FsonOption的toString()方法返回给前端时，前端需要使用eval('('+optionJsonStr+')')转换为JSON结构

定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。

formatter: "{a} <br/>{b}: {c} ({d}%)"

这里补充一下formatter格式化方法的参数说明：

{string}，模板（Template），其变量为：

{a} | {a0}

{b} | {b0}

{c} | {c0}s

{d} | {d0} （部分图表类型无此项）

多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...

其中变量a、b、c在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）

散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）

饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）

弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)

力导向图 :

节点 : a（类目名称），b（节点名称），c（节点值）

边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边）

{Function}，传递参数列表如下：

<Array> params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]

<String> ticket : 异步回调标识

<Function> callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html

自己多琢磨，多练习很容易就上手的！

 

*重要*：Echart非静态数据，一般在cotroller中获取数据，设置option属性，返回option对象。

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/225050
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号