`
阿杜杜不是阿木木
  • 浏览: 21515 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Echarts java自定义标签创建图表

阅读更多

 

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>

 

 

分享到:
评论

相关推荐

    基于JavaScript ECharts的Java自定义标签实现设计源码

    本项目是一个基于JavaScript ECharts和Java技术的自定义标签实现设计源码,包含475个文件,包括167个JavaScript文件、108个PNG图片文件、45个GIF动画文件、35个HTML文件、35个Java源文件、20个CSS样式文件、14个JSP...

    echarts自定义x轴-分时天月年自定义

    完全小白就不要看了,容易看迷,涉及到公司的一些东西,里面代码有删减,但是整理一下肯定是能用的,方法抽...这个实现的功能就是echarts x轴自定义时间段显示,自适应分时天月年显示,其他类似根据时间合并也可以用

    java-echarts封装

    ECharts是由百度开发的一个基于Canvas的开源图表库,提供丰富的图表类型,包括折线图、柱状图、饼图等,支持大量的自定义选项,用于创建交互式的数据可视化应用。在Java环境中,为了方便地在服务器端生成ECharts所需...

    Echarts-java资源工具类

    同时,Echarts库本身也支持自定义图表组件和图表类型,以满足各种复杂的需求。 综上所述,Echarts-java资源工具类是一个帮助Java开发者更方便地生成和使用Echarts图表的工具,它结合了Echarts的JavaScript库和Java...

    ECharts - Java类库.zip

    - Java API 用于创建 ECharts 图表配置 - 数据绑定和转换,将数据库或其他数据源的数据自动映射到 ECharts 配置 - 自定义事件处理,允许在服务器端响应前端图表事件 - 支持动态更新和实时数据流 4. **使用步骤*...

    java中echarts图形组件

    ECharts 是一个基于 JavaScript 的数据可视化库,广泛应用于 Web 应用中,尤其在 Java 开发的后端服务配合下,能实现丰富的前端图表展示。它由百度开发并开源,支持多种图表类型,如柱状图、折线图、饼图、散点图等...

    echarts图表导出到excel

    echarts图表导出到excel中的解决方法,做个备忘录,以防忘记

    ECharts-java 的使用demo

    ECharts 是一个由百度开发的开源JavaScript数据可视化库,它提供了丰富的图表类型,如柱状图、折线图、饼图、散点图等,以及交互功能和自定义选项,适用于网页上的数据可视化。ECharts 支持在各种浏览器上运行,并且...

    使用echarts绘制android图表

    6. **自定义图表**: - ECharts 支持高度定制,开发者可以通过修改 `option` 对象的属性和方法来自定义图表样式、交互效果、动画等。 - 可以使用 ECharts 的扩展功能,如数据区域缩放、实时监控、地理地图等,满足...

    Java 实现 FusionCharts 图表导出图片或PDF文件功能实例源码

    在Java开发中,FusionCharts是一款强大的图表库,它提供了丰富的图表类型以及高度自定义的能力,使得开发者可以轻松创建交互式、美观的数据可视化效果。本文将深入探讨如何使用Java实现FusionCharts图表的导出功能,...

    ECharts示例和jar包

    这个jar包提供了Java接口,使得开发者可以直接在Java代码中调用ECharts的API,生成JSON配置,然后在前端渲染图表。这样可以方便后端程序员处理数据并传递给前端,简化前后端协作流程。 5. **Ajax方式实现**:Ajax...

    echarts java实例

    **ECharts Java 实例详解** ...记住,ECharts的配置项非常灵活,可以根据具体需求进行自定义,实现傻瓜式配置,让开发变得更加简单。同时,用户的好评也是对我们工作的最大肯定,所以不断优化和提升用户体验至关重要。

    基于百度echarts的java以及js.zip

    在本项目中,我们主要探讨如何使用百度ECharts这一数据可视化库进行Java和JavaScript的集成应用,以创建柱状图和折线图。ECharts是由百度研发的开源数据可视化库,支持丰富的图表类型,包括柱状图、折线图、饼图等,...

    Echarts连接数据库实例

    2. **Echarts**:Echarts是我们的数据可视化工具,提供了丰富的图表类型和高度自定义的配置项。通过调用Echarts的API,我们可以创建动态、交互式的图表。 3. **MySQL**:这是一种广泛使用的开源关系型数据库管理...

    echarts java demo

    ECharts 是一个由百度开发的开源 JavaScript 图表库,它提供了丰富的可视化图表类型,如柱状图、折线图、饼图等,并且支持自定义交互和动画效果。ECharts 以其易用性、灵活性和高性能在 Web 开发中广泛应用。而 `...

    Echarts和Highcharts制作图表

    Echarts和Highcharts都是流行的JavaScript库,用于在Web应用程序中创建交互式图表和图形。它们在数据可视化领域具有广泛的应用,能够帮助用户更好地理解和解析复杂的数据。以下是对这两个库及其基本功能的详细说明:...

    freemaker简单小例子+ECharts例子

    ECharts是一款由百度开源的JavaScript图表库,它支持各种丰富的图表类型,如折线图、柱状图、饼图等,且具有高度的交互性和自定义性。在“ECharts例子”中,可能涉及以下内容: 1. **引入ECharts库**:在HTML文件中...

    1【源码】数据可视化:基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析

    Echarts是一款由百度开发的开源JavaScript图表库,它提供了丰富的图表类型,如折线图、柱状图、饼图、散点图等,并支持高度交互和自定义。Echarts的优势在于其良好的性能和易于使用的API,使得开发者可以轻松地创建...

    使用Java语言画EChats图表

    本篇文章将深入探讨如何使用Java来绘制ECharts图表,并结合EchatDemo-java类库来理解这一过程。 首先,ECharts是百度推出的一款开源的、基于JavaScript的交互式图表库,支持多种图表类型,如折线图、柱状图、饼图、...

    Echarts+ajax+java+mysql实现饼图+折线图+柱状图

    在这个项目中,AJAX用于异步地从Java后端获取数据库中的数据,然后在前端用Echarts渲染图表,实现了数据的实时更新。 3. **Java后端**: Java是服务器端处理请求和响应的主要语言。在这个案例中,Java后端可能使用...

Global site tag (gtag.js) - Google Analytics