GitHub地址:https://git.oschina.net/duhongming/echarts2javatag
为了让图表创建的更加简单,更加符合java的语义,开发了一套自定义标签来快速开发图表,该图表已经用到本公司的很多项目中。
1. 引用jar包说明
1)静态图表只依赖下面两个包,Echarts2.2.7是Echarts2的最终版本,也是最好用的。Echarts3更改了很多配置项,每时每刻都有bug产生,Echarts2是稳定版本。
<!-- 必须包:Echarts图表依赖包开始 --> <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.6.2,)</version> </dependency> <!-- 必须包:Echarts图表依赖包开始结束 -->
2)为了演示大数据量,从Sqlite数据库中获取的数据:是近三年中国各个地区每天的温度。
<!-- 演示包:Sqlite数据库API以及ORM框架开始 --> <dependency> <groupId>org.xerial</groupId> <artifactId>sqlite-jdbc</artifactId> <version>3.8.11.2</version> </dependency> <dependency> <groupId>com.j256.ormlite</groupId> <artifactId>ormlite-jdbc</artifactId> <version>4.47</version> </dependency> <!-- 演示包:Sqlite数据库API以及ORM框架结束 -->
3)动态图表是后台springsocket推送数据,而不是简单的前台ajax js轮询。
<!--spring websocket--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-messaging</artifactId> <version>${spring.version}</version> </dependency>
4)Spring Socket推送的json数据,依赖jackson。
<!-- 由于Spring采用对JSON进行了封装的jackson来生成JSON和返回给客户端开始--> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.4.4</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.4.4</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.4.4</version> </dependency> <!-- 由于Spring采用对JSON进行了封装的jackson生成JSON和返回给客户端结束-->
2 china_weather.db数据库
1) 下载地址:http://git.oschina.net/duhongming/echarts2javatag/attach_files
2) china_weather.7z >>>解压>>> 放到项目Src下面就行了.
3 基础图表
3.1折线图Line
3.1.1折线图Line的数据格式
//X轴的数据 List<String>xAxisData; //Y轴的数据 Map<String,List<Double>>yAxisData; //Y轴双轴情况下的位置定位 Map<String,Integer>yAxisIndex;
3.1.2折线图Line的Tag
唯一需要注意的是div的id和echarts里面的id应该是同一个。
<divid="line_yAxisIndex" class="main000"></div> <echarts:line id="line_yAxisIndex" title="2011年温度对比曲线" subtitle="主要城市的温度对比曲线" xAxisData="${xAxisData}" yAxisData="${yAxisData}" xAxisName="预测时间" yAxisName="最高温度(℃),最低温度(℃)" yAxisIndex="${yAxisIndex}"/>
3.2柱状图Bar
3.2.1柱状图Bar的数据格式
//X轴的数据 privateList<String> xAxisData; //Y轴的数据 privateMap<String,List<Double>> yAxisData; //Y轴双轴情况下的位置定位 privateMap<String,Integer> yAxisIndex;
3.2.2柱状图Bar的Tag
<div id="line_yAxisIndex" class="main000"></div> <echarts:bar id="line_yAxisIndex" title="短期预测数据对比曲线" subtitle="短期预测数据对比曲线" xAxisData="${xAxisData}" yAxisData="${yAxisData}" xAxisName="预测时间" yAxisName="实际电量(MW),实际总辐射(w/㎡)" yAxisIndex="${yAxisIndex}"/>
3.3饼状图Pie
3.3.1饼图Pie的数据格式
//key-value数据 privateMap<String,Object> orientData;
3.3.2饼状图Pie的tag
<div id="pie" class="main000"></div> <echarts:pie id="pie" title="某站点用户访问来源" subtitle="纯属虚构" orientData="${orientData}"/>
3.4玫瑰图Radar
3.4.1玫瑰图Radar的数据格式
//二维表结构数据 privateList<Map<String,Object>> orientData;
3.4.2玫瑰图Radar的Tag
<divid="radar16" class="main000"></div> <echarts:radar id="radar16" title="气象预测风向玫瑰图16方位" subtitle="预测时间" orientData="${orientData}" polarType="16"/>
4高级图表
4.1双数值轴折线图lineDoubleNum
4.1.1双数值轴折线图lineDoubleNum的数据格式
//每种类型数据是Double数组 privateMap<String,Double[][]> axisDataArr;
4.1.2双数值轴折线图lineDoubleNum的Tag
<divid="line_doubleNum" class="main000"></div> <echarts:lineDoubleNum id="line_doubleNum" title="双数值轴折线" subtitle="短期预测数据对比曲线" xAxisName="预测时间" yAxisName="实际电量(MW)" axisDataArr="${axisDataArr}"/>
4.2搭配时间轴折线图lineTimeLine
4.2.1搭配时间轴折线图lineTimeLine的数据格式
//X轴的数据 List<String>xAxisData; //Y轴的数据 Map<String,List<Double>>yAxisData; //Y轴双轴情况下的位置定位 Map<String,Integer>yAxisIndex; //TimeLine的Y轴数据 List<Map<String,List<Double>>>timelineAxisData; //TimeLine的X轴数据 List<String>timelineData;
4.2.2搭配时间轴折线图lineTimeLine的Tag
<divid="line_yAxisIndex" class="main000"></div> <echarts:lineTimeLine id="line_yAxisIndex" title="2011年温度对比曲线" subtitle="主要城市的温度对比曲线" xAxisName="预测时间" yAxisName="最高温度(℃),最低温度(℃)" xAxisData="${xAxisData}" yAxisData="${yAxisData}" timelineData="${timelineData}" timelineAxisData="${timelineAxisData}" yAxisIndex="${yAxisIndex}"/>
4.3反转条形图Bar
4.3.1反转条形图Bar的数据格式
//X轴的数据 privateList<String> xAxisData; //Y轴的数据 privateMap<String,List<Double>> yAxisData; //Y轴双轴情况下的位置定位 privateMap<String,Integer> yAxisIndex;
4.3.2反转条形图Bar的Tag
<divid="line_yAxisIndex" class="main000"></div> <echarts:bar id="line_yAxisIndex" title="短期预测数据对比曲线" subtitle="短期预测数据对比曲线" xAxisData="${xAxisData}" yAxisData="${yAxisData}" xAxisName="预测时间" yAxisName="实际电量(MW),实际总辐射(w/㎡)" yAxisIndex="${yAxisIndex}"/>
5动态图表
了解Spring Socket推送信息:
1. WebSocketConfig中注册一个SocketURL:/webSocket/data
2. 设置定时推送数据:
@Scheduled(cron="0/2 * * * * ? ") //每2秒执行一次 infoHandlerBF().sendMessageToUsers(newTextMessage(jsonStr));
3. 给所有连接用户推送消息:
public void sendMessageToUsers(TextMessage message) { for (WebSocketSession user : users) { try { if (user.isOpen()) { user.sendMessage(message); } } catch (IOException e) { e.printStackTrace(); } } }
4. 前台接受数据:
var ws = new SockJS("/echarts2javatag /webSocket/data"); ws.onopen = function () { console.log('Info: connectionopened.'); }; ws.onmessage = function (event) { varjson=eval("("+event.data+")");//将数据转成json格式 //业务代码 }; ws.onclose = function (event) { console.log('Info: connectionclosed.'); console.log(event); };
5.1动态仪表盘Gauge
5.1.1动态仪表盘Gauge的数据格式
public class SocketDataGauge{ privateString tag; privateDouble value; } privateList<SocketDataGauge> Json数据格式: [{"tag":"temperature1","value":178.03634028465075},{"tag":"temperature2","value":6482.322904395684},{"tag":"temperature3","value":2495.388315562964},{"tag":"temperature4","value":1358.7228569841902}]
5.1.2动态仪表盘Gauge的Tag
<ec:gauge id="temperature1" height="360px" uri="/echarts2javatag/webSocket/data" unitName="℃" title="全公司仪表温度" subtitle="仪表温度1号表" measureRange="10000" splitNumber="10" axisLabelShow="true" toFixed="0"> </ec:gauge>
相关推荐
完全小白就不要看了,容易看迷,涉及到公司的一些东西,里面代码有删减,但是整理一下肯定是能用的,方法抽...这个实现的功能就是echarts x轴自定义时间段显示,自适应分时天月年显示,其他类似根据时间合并也可以用
echarts图表导出到excel中的解决方法,做个备忘录,以防忘记
echarts输出-JAVA后台直接输出echarts图标的图片 调用java代码 直接生成echarts的图表的图片
poi 将echar报表生成到word中,通过base64格式把图表信息传到后台,后台自动生成word文档,当然可以根据模板自动填充数据,这个小案例只是根据自己需要生成文档,根据自定义模板再拼接自定义内容也有,需要的联系我...
自定义双层嵌套饼图,里面一层饼图显示、外面罩着一层饼图显示,外加动画以及放大效果
简单的说:报表就是用表格、图表等格式来动态显示数据,可以用公式表示为:“报表 = 多样的格式 + 动态的数据”。 2、主讲内容 第一天 l 开发环境搭建 l 使用POI导入数据 l 使用POI导出数据 l 介绍POI创建各种样式 ...
内置功能 用户管理:用户是系统操作者,该功能主要完成系统用户配置。 部门管理:配置系统组织机构,无限层级,树结构展现,可随意调整上下级。...统计图表设计器:可视化配置echarts统计图表,支持
ECharts:前端 JavaScript 交互式图表库 MathJax:前端数学公式渲染引擎 SoundRecorder:前端 HTML5 录音库 ZeroClipboard:前端剪贴板支持 JavaScript MD5:前端 JavaScript MD5 库 ReconnectingWebSocket:...
DataRoom是一款基于SpringBoot、MyBatisPlus、Vue、ElementUI、G2Plot、Echarts等技术栈的大屏设计器,具备大屏设计、预览能力,支持MySQL、Oracle、PostgreSQL、SQLServer、ElasticSearch、JSON、JS、HTTP、Groovy...
支持资源自定义上传、在大屏设计器中直接引用资源,如:3D图片、边框图片、装饰条、背景图。支持MySQL、PostgreSQL、Oracle 、ClickHouse数据库接入。支持原始数据集、自助数据集、存储过程数据集、JSON数据集、脚本...
报告自定义配置报表/ ssm目标将部分报表开发从项目中剥离出来,降低代码扩展度,提高开发效率。使用方法1....图表预览 (更多设置请直接使用百度开源图表ECharts)联系方式电子邮件: qq:1211176644
★★★自定义图表:在已有实体的基础上,可配置自定义的明细表和聚合表,可配置echarts图表,可将多个图表放在一个看板中展示。★反向工程:如果您的应用已经完成了表结构设计,请使用反向工程功能将建表语句反向...
[8] 使用 Element-UI 组件库开发页面,Echarts 开发可视化图表,二者均简单易用。 ### 1.2 项目技术栈 后端部分:[Springboot](https://github.com/spring-projects/spring-boot)(后端核心框架)、[Mybatis]...
基于:HTML/CSS/Echarts等等,包含行业:区块链金融行业、智慧社区、智慧物业、智慧政务、智慧交通、通用模板等,包含功能:自定义字体、Css动画、WebSocket实时数据、K线折线等各种图表,iframe嵌套H5/App,替换js...