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、柱状图
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
生成的图如下:
java 版本EChart使用相关推荐
- 下载最新版本Maven 3.3.9 ,检测安装是否成功时发现Java版本JDK却低于1.7时报错
下线最新版本Maven 3.3.9 ,检测安装是否成功时发现Java版本JDK却低于1.7时报错 cmd: mvn -v Exception in thread "main" ja ...
- linux 修改java版本_Linux 有问必答:如何在 Linux 中改变默认的 Java 版本
提问:当我尝试在Linux中运行一个Java程序时,我遇到了一个错误.看上去像程序编译所使用的Java版本与我本地的不同.我该如何在Linux上切换默认的Java版本? 当Java程序编译时,编译环境 ...
- java jnlp被阻止_JNLP应使用特定的Java版本,但会出现错误结果
我在这里面临一个问题.我想使用特殊版本来运行我们的 java webstart应用程序,但只需要一个jnlp. ("经过测试,- blabla我们不能使用新版本- blabla"随 ...
- Ubuntu/Debian 系统切换Java(JVM),修改Java版本,JAVA_HOME
http://blog.mypapit.net/2007/10/how-to-switch-between-different-java-jvm-in-ubuntu-and-debian-gnu-li ...
- mac os x java_Mac OS X和多个Java版本
守着一只汪 在Mac上管理多个Java版本的最简洁方法是使用Homebrew.在内Homebrew,使用:homebrew-cask 安装java的版本jenv 管理已安装的java版本如http:/ ...
- centos 更换java版本_centos7 更换jdk版本
查看java版本 java -version 如果有java版本(如果没有直接看红色虚线以下的) 输入 rpm -qa | grep java会显示以下几条内容: ******* ******** ...
- 【错误记录】Android 编译时技术版本警告 ( 注解处理器与主应用支持的 Java 版本不匹配 )
文章目录 一.报错信息 二.问题分析 三.解决方案 一.报错信息 在使用 Android 编译时技术 , 涉及 编译时注解 , 注解处理器 ; 开发注解处理器后 , 编译报如下警告 ; 该警告不会影响 ...
- 【Android APT】注解处理器 ( 配置注解依赖、支持的注解类型、Java 版本支持 )
文章目录 一.注解处理器 依赖 编译时注解 二.设置 注解处理器 支持的注解类型 三.设置 注解处理器 支持的 Java 版本 四.博客资源 Android APT 学习进阶路径 : 推荐按照顺序阅读 ...
- 【SmartJob】【隔离装置】WEB/统计程序和隔离程序共享服务器时的JAVA版本冲突问题
SmartJob.DmsWeb与SmartSys共享服务器容易引发Java版本冲突问题: Java版本不正确 UnsupportedClassVersionError Exception in thr ...
最新文章
- mysql超详细教程_MySQL8.0.23安装超详细教程
- 最真实的互联网用户画像...
- java的8中数据类型_java 8种基本数据类型
- Android基础教程(三)之------ Activity 窗口切换
- 王者荣耀微信哪个服务器人最少,王者荣耀:微信区王者人数锐减,大神们都去哪了?这些原因很真实...
- Java-While循环
- Android TabHost和xml定义Menu应用
- sql 会话_在特定会话中禁用SQL Server中的触发器
- [C++]虚函数-同名访问
- Mac上安装PL/SQL Developer
- C语言实现SM4加解密
- ZXPInstaller for Mac(PS扩展安装器)免费版
- [HAOI2009] 毛毛虫
- 工程经济有何难,思维导图来助阵
- CSS中的filter与backdrop-filter属性的异同点
- 查找整数c语言程序,查找整数(示例代码)
- 人工智能系列电子书分享
- Kotlin 插件的落幕,ViewBinding 的崛起,android适配问题
- Python爬虫 - 统计自己读过小说的字数
- 手机验证码接收系统如何选择
热门文章
- 云服务 华为p10 短信_苹果、小米、华为,手机云服务哪家强?
- 【第5篇】Python爬虫实战-读取临时邮箱内容
- linux 达梦C接口,达梦数据守护搭建
- Soul 网关源码阅读(四)Dubbo请求概览
- mysql 5.5 外键_MySQL 5.5添加外键失败,错误[HY000] [150]和[HY000] [1005]
- 基础html的网页,[网页设计]HTML基础(五)——
- python tkinter linux,用于Python和Tkinter的Linux上的字体管理
- linux mount 原文件夹,window文件夹mount挂载Linux
- MATLAB图像处理之二值化以及灰度处理
- Java中判断一个字符串全为数字和字母