java 版本EChart使用
一、简介
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、柱状图
/**
* 柱状图
*
* @param isHorizontal
* 是否水平放置
*/
public void testBar(boolean isHorizontal) {
String[] citis = { "广州", "深圳", "珠海", "汕头", "韶关", "佛山" };
int[] datas = { 6030, 7800, 5200, 3444, 2666, 5708 };
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)" };
String title = "地市数据"; GsonOption option = new GsonOption(); option.title(title); // 标题
// 工具栏
option.toolbox().show(true).feature(Tool.mark, // 辅助线
Tool.dataView, // 数据视图
new MagicType(Magic.line, Magic.bar),// 线图、柱状图切换
Tool.restore,// 还原
Tool.saveAsImage);// 保存为图片 option.tooltip().show(true).formatter("{a} <br/>{b} : {c}");//显示工具提示,设置提示格式 option.legend(title);// 图例 Bar bar = new Bar(title);// 图类别(柱状图)
CategoryAxis category = new CategoryAxis();// 轴分类
category.data(citis);// 轴数据类别
// 循环数据
for (int i = 0; i < citis.length; i++) {
int data = datas[i];
String color = colors[i];
// 类目对应的柱状图
Map<String, Object> map = new HashMap<String, Object>(2);
map.put("value", data);
map.put("itemStyle", new ItemStyle().normal(new Normal().color(color)));
bar.data(map);
} if (isHorizontal) {// 横轴为类别、纵轴为值
option.xAxis(category);// x轴
option.yAxis(new ValueAxis());// y轴
} else {// 横轴为值、纵轴为类别
option.xAxis(new ValueAxis());// x轴
option.yAxis(category);// y轴
} option.series(bar);
}
生成的json数据如下:
{
"title": {
"text": "地市数据"
},
"toolbox": {
"feature": {
"mark": {
"show": true,
"title": {
"mark": "辅助线开关",
"markClear": "清空辅助线",
"markUndo": "删除辅助线"
},
"lineStyle": {
"color": "#1e90ff",
"type": "dashed",
"width": 2
}
},
"dataView": {
"show": true,
"title": "数据视图",
"readOnly": false,
"lang": ["数据视图", "关闭", "刷新"]
},
"magicType": {
"show": true,
"title": {
"line": "折线图切换",
"stack": "堆积",
"bar": "柱形图切换",
"tiled": "平铺"
},
"type": ["line", "bar"]
},
"restore": {
"show": true,
"title": "还原"
},
"saveAsImage": {
"show": true,
"title": "保存为图片",
"type": "png",
"lang": ["点击保存"]
}
},
"show": true
},
"tooltip": {
"formatter": "{a} <br/>{b} : {c}",
"show": true
},
"legend": {
"data": ["地市数据"]
},
"xAxis": [{
"type": "category",
"data": ["广州", "深圳", "珠海", "汕头", "韶关", "佛山"]
}],
"yAxis": [{
"type": "value"
}],
"series": [{
"name": "地市数据",
"type": "bar",
"data": [{
"value": 6030,
"itemStyle": {
"normal": {
"color": "rgb(2,111,230)"
}
}
}, {
"value": 7800,
"itemStyle": {
"normal": {
"color": "rgb(186,73,46)"
}
}
}, {
"value": 5200,
"itemStyle": {
"normal": {
"color": "rgb(78,154,97)"
}
}
}, {
"value": 3444,
"itemStyle": {
"normal": {
"color": "rgb(2,111,230)"
}
}
}, {
"value": 2666,
"itemStyle": {
"normal": {
"color": "rgb(186,73,46)"
}
}
}, {
"value": 5708,
"itemStyle": {
"normal": {
"color": "rgb(78,154,97)"
}
}
}]
}]
}
生成的图如下:
2、折线图
/**
* 折线图
*
* @param isHorizontal
* 是否水平放置
*/
public void testLine(boolean isHorizontal) {
String[] types = { "邮件营销", "联盟广告", "视频广告" };
int[][] datas = { { 120, 132, 101, 134, 90, 230, 210 }, { 220, 182, 191, 234, 290, 330, 310 }, { 150, 232, 201, 154, 190, 330, 410 } };
String title = "广告数据"; GsonOption option = new GsonOption(); option.title().text(title).subtext("虚构").x("left");// 大标题、小标题、位置 // 提示工具
option.tooltip().trigger(Trigger.axis);// 在轴上触发提示数据
// 工具栏
option.toolbox().show(true).feature(Tool.saveAsImage);// 显示保存为图片 option.legend(types);// 图例 CategoryAxis category = new CategoryAxis();// 轴分类
category.data("周一", "周二", "周三", "周四", "周五", "周六", "周日");
category.boundaryGap(false);// 起始和结束两端空白策略 // 循环数据
for (int i = 0; i < types.length; i++) {
Line line = new Line();// 三条线,三个对象
String type = types[i];
line.name(type).stack("总量");
for (int j = 0; j < datas[i].length; j++)
line.data(datas[i][j]);
option.series(line);
} if (isHorizontal) {// 横轴为类别、纵轴为值
option.xAxis(category);// x轴
option.yAxis(new ValueAxis());// y轴
} else {// 横轴为值、纵轴为类别
option.xAxis(new ValueAxis());// x轴
option.yAxis(category);// y轴
} }
生成的json数据如下:
{
"title": {
"text": "广告数据",
"subtext": "虚构",
"x": "left"
},
"toolbox": {
"feature": {
"saveAsImage": {
"show": true,
"title": "保存为图片",
"type": "png",
"lang": ["点击保存"]
}
},
"show": true
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["邮件营销", "联盟广告", "视频广告"]
},
"xAxis": [{
"boundaryGap": false,
"type": "category",
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}],
"yAxis": [{
"type": "value"
}],
"series": [{
"name": "邮件营销",
"type": "line",
"stack": "总量",
"data": [120, 132, 101, 134, 90, 230, 210]
}, {
"name": "联盟广告",
"type": "line",
"stack": "总量",
"data": [220, 182, 191, 234, 290, 330, 310]
}, {
"name": "视频广告",
"type": "line",
"stack": "总量",
"data": [150, 232, 201, 154, 190, 330, 410]
}]
}
生成的图如下:
3、饼图
/**
* 饼图
*/
public void testPie() {
String[] types = { "邮件营销", "联盟广告", "视频广告" };
int[] datas = { 120, 132, 101 };
String title = "广告数据";
GsonOption option = new GsonOption(); option.title().text(title).subtext("虚构").x("center");// 大标题、小标题、标题位置 // 提示工具 鼠标在每一个数据项上,触发显示提示数据
option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c} ({d}%)"); // 工具栏
option.toolbox().show(true).feature(new Mark().show(true),// 辅助线
new DataView().show(true).readOnly(false),// 数据视图
new MagicType().show(true).type(new Magic[] { Magic.pie, Magic.funnel }), //饼图、漏斗图切换
new Option().series(new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548)),// 漏斗图设置
Tool.restore,// 还原
Tool.saveAsImage);// 保存为图片 option.legend().orient(Orient.horizontal).x("left").data(types);// 图例及位置 option.calculable(true);// 拖动进行计算 Pie pie = new Pie(); // 标题、半径、位置
pie.name(title).radius("55%").center("50%", "60%"); // 循环数据
for (int i = 0; i < types.length; i++) {
Map<String, Object> map = new HashMap<String, Object>(2);
map.put("value", datas[i]);
map.put("name", types[i]);
pie.data(map);
} option.series(pie);
}
生成的json数据如下:
{
"calculable": true,
"title": {
"text": "广告数据",
"subtext": "虚构",
"x": "center"
},
"toolbox": {
"feature": {
"mark": {
"show": true,
"title": {
"mark": "辅助线开关",
"markClear": "清空辅助线",
"markUndo": "删除辅助线"
},
"lineStyle": {
"color": "#1e90ff",
"type": "dashed",
"width": 2
}
},
"dataView": {
"show": true,
"title": "数据视图",
"readOnly": false,
"lang": ["数据视图", "关闭", "刷新"]
},
"magicType": {
"show": true,
"title": {
"line": "折线图切换",
"stack": "堆积",
"bar": "柱形图切换",
"tiled": "平铺"
},
"type": ["pie", "funnel"]
},
"restore": {
"show": true,
"title": "还原"
},
"saveAsImage": {
"show": true,
"title": "保存为图片",
"type": "png",
"lang": ["点击保存"]
}
},
"show": true
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "horizontal",
"data": ["邮件营销", "联盟广告", "视频广告"],
"x": "left"
},
"series": [{
"center": ["50%", "60%"],
"radius": "55%",
"name": "广告数据",
"type": "pie",
"data": [{
"value": 120,
"name": "邮件营销"
}, {
"value": 132,
"name": "联盟广告"
}, {
"value": 101,
"name": "视频广告"
}]
}]
}
生成的图如下:
java 版本EChart使用的更多相关文章
- Java版本:识别Json字符串并分隔成Map集合
前言: 最近又看了点Java的知识,于是想着把CYQ.Data V5迁移到Java版本. 过程发现坑很多,理论上看大部分很相似,实践上代码写起来发现大部分都要重新思考方案. 遇到的C#转Java的一些 ...
- 你的程序支持复杂的时间调度嘛?如约而来的 java 版本
你的程序支持复杂的时间调度嘛? 这篇文章介绍了时间适配器的c#版本,是给客户端用的,服务器自然也要有一套对应的做法,java版本的 [年][月][日][星期][时间] [*][*][*][*][*] ...
- 崔用志-微信开发-java版本
崔用志-微信开发-java版本 今天看到一些关于微信开发的知识蛮好的博客,分享给大家,希望对大家有帮助. 微信开发准备(一)--Maven仓库管理新建WEB项目 微信开发准备(二)--springmv ...
- java版本区别
java版本区别 点我,点我,Eclipse几个版本号的区别(part1) 点我,点我,Eclipse几个版本号的区别(part2) 点我,点我,Eclipse几个版本号的区别(part3)
- javac。java版本切换
如果安装有多个Java版本时(有时候有些软件自行安装),怎样方便的进行切换呢.除了常见的设置环境变量外,今天学到了一种新的切换方法: update-alternatives --config java ...
- JGibbLDA:java版本的LDA(Latent Dirichlet Allocation)实现、修改及使用
转载自:http://blog.csdn.net/memray/article/details/16810763 一.概述 JGibbLDA是一个java版本的LDA(Latent Dirichl ...
- Mac下修改默认的Java版本
今天在安装Elicpse IDE的时候,发现提示安装的Java版本不支持,于是在官方去下载了Jre最新版本并安装,在安装完过后再次打开Elicpse发现提示还是不正确,如果用Google查询到一些资料 ...
- Mac 配置java版本 ---- MySql数据库权限设置 --- openfire
java -version 显示java 版本 sudo su - root 切换身份 cd /usr/local/openfire 进入openfire目录 cd bin/ 进入 bin vim o ...
- 升级mac的java版本
在OS X EI Capitan下, java版本太低,从oracle官网下载的dmg文件升级一直有问题, 我发现mac下的java环境有三处 #这应该是系统自带java环境,默认/usr/bin/j ...
随机推荐
- 安卓SQLite常见错误
利用闲时写了一个简单的Sql语句操作SQLite数据库,在用SimpleCursorAdapter时出了一个异常好久都没解决 Process: com.example.chunchuner.usesq ...
- mongodb安装配置
下载安装 官网下载地址:https://www.mongodb.com/download-center 执行msi文件. 环境配置 可以参照我的步骤来进行配置,目录根据个人需要设置. 解压安装包到D: ...
- Replace Temp with Query
double GetPrice() { int basePrice = _quantity * _itemPrice; double discountFactor; ) { discountFacto ...
- 多个 App 间启动
http://developer.nokia.com/: URI associations for Windows Phone http://msdn.microsoft.com/: Auto-lau ...
- react基础(1)
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- block传值和代理传值的异同点
delegate:1,“一对一”,对同一个协议,一个对象只能设置一个代理delegate,所以单例对象就不能用代理:2,代理更注重过程信息的传输:比如发起一个网络请求,可能想要知道此时请求是否已经开始 ...
- 我的runtime学习笔记
0.简介: OC方法不同于C语言函数,属于动态调用过程,在编译的时候并不能决定真正调用哪个函数,只有在真正运行的时候才会根据函数的名称找到对应的函数来调用. 至于其他理论上的东西不必讲太多,编程讲的就 ...
- 多步骤多分步的组件StepJump
最近的工作在做一个多步骤多分步的表单页面,这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的,每个步骤可能又分多个小步骤来处理,大步骤之间,以及小步骤之间都是一种顺序发生的业务关系.起初以为这 ...
- C#获取IP和整数IP方法
体验: http://tool.hovertree.com/info/ip/代码如下: using System; using System.Text; using System.Text.Regul ...
- gRPC C#学习
前些天gRPC 发布1.0 版本,代表着gRPC 已经正式进入稳定阶段. 今天我们就来学习gRPC C# .而且目前也已经支持.NET Core 可以实现完美跨平台. 传统的.NET 可以通过Mono ...