java 版本EChart使用

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 一、简介   EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计。该种方式js在页面动态拼接json数据,再进行渲染。这种方法的优点是,灵活,可以随时进行修改。缺点是js代码多,难以维护。

一、简介
  EChart是百度开发的js图表软件,用它我们可以很方便地以图形化的方式对数据进行分析统计。该种方式js在页面动态拼接json数据,再进行渲染。这种方法的优点是,灵活,可以随时进行修改。缺点是js代码多,难以维护。此时我们可以Java EChart插件,在后端构造好option数据,最后在页面直接使用构造好的option数据,渲染效果。下载地址为:http://git.oschina.net/free/ECharts
  EChart提供链式的调用方法,使用也比较方便。它依赖Google的gson包,gson下载地址为:https://github.com/google/gson 。gson与EChart加入项目依赖。
  maven依赖如下:

<dependency>
  <groupId>com.github.abel533</groupId>
  <artifactId>ECharts</artifactId>
  <version>2.2.7</version>
</dependency>

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.5</version>
</dependency>

二、示例
  1、柱状图

 1     /**
 2      * 柱状图
 3      * 
 4      * @param isHorizontal
 5      *            是否水平放置
 6      */
 7     public void testBar(boolean isHorizontal) {
 8         String[] citis = { "广州", "深圳", "珠海", "汕头", "韶关", "佛山" };
 9         int[] datas = { 6030, 7800, 5200, 3444, 2666, 5708 };
10         String[] colors = { "rgb(2,111,230)", "rgb(186,73,46)", "rgb(78,154,97)", "rgb(2,111,230)", "rgb(186,73,46)", "rgb(78,154,97)" };
11         String title = "地市数据";
12 
13         GsonOption option = new GsonOption();
14 
15         option.title(title); // 标题
16         // 工具栏
17         option.toolbox().show(true).feature(Tool.mark, // 辅助线
18                 Tool.dataView, // 数据视图
19                 new MagicType(Magic.line, Magic.bar),// 线图、柱状图切换
20                 Tool.restore,// 还原
21                 Tool.saveAsImage);// 保存为图片
22 
23         option.tooltip().show(true).formatter("{a} <br/>{b} : {c}");//显示工具提示,设置提示格式
24 
25         option.legend(title);// 图例
26 
27         Bar bar = new Bar(title);// 图类别(柱状图)
28         CategoryAxis category = new CategoryAxis();// 轴分类
29         category.data(citis);// 轴数据类别
30         // 循环数据
31         for (int i = 0; i < citis.length; i++) {
32             int data = datas[i];
33             String color = colors[i];
34             // 类目对应的柱状图
35             Map<String, Object> map = new HashMap<String, Object>(2);
36             map.put("value", data);
37             map.put("itemStyle", new ItemStyle().normal(new Normal().color(color)));
38             bar.data(map);
39         }
40 
41         if (isHorizontal) {// 横轴为类别、纵轴为值
42             option.xAxis(category);// x轴
43             option.yAxis(new ValueAxis());// y轴
44         } else {// 横轴为值、纵轴为类别
45             option.xAxis(new ValueAxis());// x轴
46             option.yAxis(category);// y轴
47         }
48 
49         option.series(bar); 
50     }

   生成的json数据如下:

  1 {
  2   "title": {
  3     "text": "地市数据"
  4   },
  5   "toolbox": {
  6     "feature": {
  7       "mark": {
  8         "show": true,
  9         "title": {
 10           "mark": "辅助线开关",
 11           "markClear": "清空辅助线",
 12           "markUndo": "删除辅助线"
 13         },
 14         "lineStyle": {
 15           "color": "#1e90ff",
 16           "type": "dashed",
 17           "width": 2
 18         }
 19       },
 20       "dataView": {
 21         "show": true,
 22         "title": "数据视图",
 23         "readOnly": false,
 24         "lang": ["数据视图", "关闭", "刷新"]
 25       },
 26       "magicType": {
 27         "show": true,
 28         "title": {
 29           "line": "折线图切换",
 30           "stack": "堆积",
 31           "bar": "柱形图切换",
 32           "tiled": "平铺"
 33         },
 34         "type": ["line", "bar"]
 35       },
 36       "restore": {
 37         "show": true,
 38         "title": "还原"
 39       },
 40       "saveAsImage": {
 41         "show": true,
 42         "title": "保存为图片",
 43         "type": "png",
 44         "lang": ["点击保存"]
 45       }
 46     },
 47     "show": true
 48   },
 49   "tooltip": {
 50     "formatter": "{a} <br/>{b} : {c}",
 51     "show": true
 52   },
 53   "legend": {
 54     "data": ["地市数据"]
 55   },
 56   "xAxis": [{
 57     "type": "category",
 58     "data": ["广州", "深圳", "珠海", "汕头", "韶关", "佛山"]
 59   }],
 60   "yAxis": [{
 61     "type": "value"
 62   }],
 63   "series": [{
 64     "name": "地市数据",
 65     "type": "bar",
 66     "data": [{
 67       "value": 6030,
 68       "itemStyle": {
 69         "normal": {
 70           "color": "rgb(2,111,230)"
 71         }
 72       }
 73     }, {
 74       "value": 7800,
 75       "itemStyle": {
 76         "normal": {
 77           "color": "rgb(186,73,46)"
 78         }
 79       }
 80     }, {
 81       "value": 5200,
 82       "itemStyle": {
 83         "normal": {
 84           "color": "rgb(78,154,97)"
 85         }
 86       }
 87     }, {
 88       "value": 3444,
 89       "itemStyle": {
 90         "normal": {
 91           "color": "rgb(2,111,230)"
 92         }
 93       }
 94     }, {
 95       "value": 2666,
 96       "itemStyle": {
 97         "normal": {
 98           "color": "rgb(186,73,46)"
 99         }
100       }
101     }, {
102       "value": 5708,
103       "itemStyle": {
104         "normal": {
105           "color": "rgb(78,154,97)"
106         }
107       }
108     }]
109   }]
110 }
View Code

  生成的图如下:

  

  2、折线图

 1 /**
 2      * 折线图
 3      * 
 4      * @param isHorizontal
 5      *            是否水平放置
 6      */
 7     public void testLine(boolean isHorizontal) {
 8         String[] types = { "邮件营销", "联盟广告", "视频广告" };
 9         int[][] datas = { { 120, 132, 101, 134, 90, 230, 210 }, { 220, 182, 191, 234, 290, 330, 310 }, { 150, 232, 201, 154, 190, 330, 410 } };
10         String title = "广告数据";
11 
12         GsonOption option = new GsonOption();
13 
14         option.title().text(title).subtext("虚构").x("left");// 大标题、小标题、位置
15 
16         // 提示工具
17         option.tooltip().trigger(Trigger.axis);// 在轴上触发提示数据
18         // 工具栏
19         option.toolbox().show(true).feature(Tool.saveAsImage);// 显示保存为图片
20 
21         option.legend(types);// 图例
22 
23         CategoryAxis category = new CategoryAxis();// 轴分类
24         category.data("周一", "周二", "周三", "周四", "周五", "周六", "周日");
25         category.boundaryGap(false);// 起始和结束两端空白策略
26 
27         // 循环数据
28         for (int i = 0; i < types.length; i++) {
29             Line line = new Line();// 三条线,三个对象
30             String type = types[i];
31             line.name(type).stack("总量");
32             for (int j = 0; j < datas[i].length; j++)
33                 line.data(datas[i][j]);
34             option.series(line);
35         }
36 
37         if (isHorizontal) {// 横轴为类别、纵轴为值
38             option.xAxis(category);// x轴
39             option.yAxis(new ValueAxis());// y轴
40         } else {// 横轴为值、纵轴为类别
41             option.xAxis(new ValueAxis());// x轴
42             option.yAxis(category);// y轴
43         }
44 
45     } 

  生成的json数据如下:

 1 {
 2   "title": {
 3     "text": "广告数据",
 4     "subtext": "虚构",
 5     "x": "left"
 6   },
 7   "toolbox": {
 8     "feature": {
 9       "saveAsImage": {
10         "show": true,
11         "title": "保存为图片",
12         "type": "png",
13         "lang": ["点击保存"]
14       }
15     },
16     "show": true
17   },
18   "tooltip": {
19     "trigger": "axis"
20   },
21   "legend": {
22     "data": ["邮件营销", "联盟广告", "视频广告"]
23   },
24   "xAxis": [{
25     "boundaryGap": false,
26     "type": "category",
27     "data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
28   }],
29   "yAxis": [{
30     "type": "value"
31   }],
32   "series": [{
33     "name": "邮件营销",
34     "type": "line",
35     "stack": "总量",
36     "data": [120, 132, 101, 134, 90, 230, 210]
37   }, {
38     "name": "联盟广告",
39     "type": "line",
40     "stack": "总量",
41     "data": [220, 182, 191, 234, 290, 330, 310]
42   }, {
43     "name": "视频广告",
44     "type": "line",
45     "stack": "总量",
46     "data": [150, 232, 201, 154, 190, 330, 410]
47   }]
48 }
View Code

  生成的图如下:

    

  3、饼图

 1 /**
 2      *  饼图
 3      */
 4     public void testPie() {
 5         String[] types = { "邮件营销", "联盟广告", "视频广告" };
 6         int[] datas = { 120, 132, 101 };
 7         String title = "广告数据";
 8         GsonOption option = new GsonOption();
 9 
10         option.title().text(title).subtext("虚构").x("center");// 大标题、小标题、标题位置
11 
12         // 提示工具 鼠标在每一个数据项上,触发显示提示数据
13         option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c} ({d}%)");
14 
15         // 工具栏
16         option.toolbox().show(true).feature(new Mark().show(true),// 辅助线
17                 new DataView().show(true).readOnly(false),// 数据视图
18                 new MagicType().show(true).type(new Magic[] { Magic.pie, Magic.funnel }), //饼图、漏斗图切换
19                 new Option().series(new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548)),// 漏斗图设置
20                 Tool.restore,// 还原
21                 Tool.saveAsImage);// 保存为图片
22 
23         option.legend().orient(Orient.horizontal).x("left").data(types);// 图例及位置
24 
25         option.calculable(true);// 拖动进行计算
26 
27         Pie pie = new Pie();
28 
29         // 标题、半径、位置
30         pie.name(title).radius("55%").center("50%", "60%");
31 
32         // 循环数据
33         for (int i = 0; i < types.length; i++) {
34             Map<String, Object> map = new HashMap<String, Object>(2);
35             map.put("value", datas[i]);
36             map.put("name", types[i]);
37             pie.data(map);
38         }
39 
40         option.series(pie); 
41     }

  生成的json数据如下:

 1 {
 2   "calculable": true,
 3   "title": {
 4     "text": "广告数据",
 5     "subtext": "虚构",
 6     "x": "center"
 7   },
 8   "toolbox": {
 9     "feature": {
10       "mark": {
11         "show": true,
12         "title": {
13           "mark": "辅助线开关",
14           "markClear": "清空辅助线",
15           "markUndo": "删除辅助线"
16         },
17         "lineStyle": {
18           "color": "#1e90ff",
19           "type": "dashed",
20           "width": 2
21         }
22       },
23       "dataView": {
24         "show": true,
25         "title": "数据视图",
26         "readOnly": false,
27         "lang": ["数据视图", "关闭", "刷新"]
28       },
29       "magicType": {
30         "show": true,
31         "title": {
32           "line": "折线图切换",
33           "stack": "堆积",
34           "bar": "柱形图切换",
35           "tiled": "平铺"
36         },
37         "type": ["pie", "funnel"]
38       },
39       "restore": {
40         "show": true,
41         "title": "还原"
42       },
43       "saveAsImage": {
44         "show": true,
45         "title": "保存为图片",
46         "type": "png",
47         "lang": ["点击保存"]
48       }
49     },
50     "show": true
51   },
52   "tooltip": {
53     "trigger": "item",
54     "formatter": "{a} <br/>{b} : {c} ({d}%)"
55   },
56   "legend": {
57     "orient": "horizontal",
58     "data": ["邮件营销", "联盟广告", "视频广告"],
59     "x": "left"
60   },
61   "series": [{
62     "center": ["50%", "60%"],
63     "radius": "55%",
64     "name": "广告数据",
65     "type": "pie",
66     "data": [{
67       "value": 120,
68       "name": "邮件营销"
69     }, {
70       "value": 132,
71       "name": "联盟广告"
72     }, {
73       "value": 101,
74       "name": "视频广告"
75     }]
76   }]
77 }
View Code

  生成的图如下:

    

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
3月前
|
Java 中间件 测试技术
java依赖冲突解决问题之jar包版本冲突无法通过升降级解决时如何解决
java依赖冲突解决问题之jar包版本冲突无法通过升降级解决时如何解决
|
3月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
18天前
|
Java Linux Windows
如何查看已安装的 Java 版本
要查看已安装的 Java 版本,打开命令提示符或终端,输入 `java -version`,回车后即可显示当前系统中 Java 的版本信息。
|
18天前
|
Ubuntu Java Linux
如何检查 Java 版本是否兼容
要检查Java版本是否兼容,可在命令行输入“java -version”查看当前安装的Java版本,然后对比目标应用所需的Java版本,确保其满足要求。
|
1月前
|
缓存 Java Maven
java: 警告: 源发行版 11 需要目标发行版 11 无效的目标发行版: 11 jdk版本不符,项目jdk版本为其他版本
如何解决Java项目中因JDK版本不匹配导致的编译错误,包括修改`pom.xml`文件、调整项目结构、设置Maven和JDK版本,以及清理缓存和重启IDEA。
46 1
java: 警告: 源发行版 11 需要目标发行版 11 无效的目标发行版: 11 jdk版本不符,项目jdk版本为其他版本
|
1月前
|
Java Docker 容器
java版本学习网站又添加了一个libgdx模块
java版本学习网站之前添加了docker,想了想还是再把libgdx添加进去吧。
29 3
|
1月前
|
Java Maven Spring
查看springboot版本支持最高的java版本
截至最近更新,Spring Boot 3.0及以上版本支持的最高Java版本为Java 17。鉴于技术的不断演进,建议直接参考Spring Boot的官方文档获取最准确的支持信息,因为这些版本兼容性可能会随着新版本的发布而有所变化。选择与你的Spring Boot版本相匹配的Java版本,可以确保充分利用框架特性,同时保证项目的稳定性和前瞻性。
46 0
|
2月前
|
Java
java版本详解
java版本详解
|
1月前
|
Java Linux Maven
用sdkman在linux上管理多个java版本
本文介绍了如何在Linux上使用SDKMAN来管理多个Java版本,包括安装SDKMAN、验证安装、列出和安装不同版本的JDK、Maven和Gradle,以及如何切换使用不同版本。
49 0
|
2月前
|
Java API 开发工具
Java不同的版本
Java不同的版本Java不同的版本
42 4