Echarts java自定义标签创建图表

阅读更多

 

GitHub地址：https://git.oschina.net/duhongming/echarts2javatag

为了让图表创建的更加简单，更加符合java的语义，开发了一套自定义标签来快速开发图表，该图表已经用到本公司的很多项目中。

1. 引用jar包说明

 

1）静态图表只依赖下面两个包，Echarts2.2.7是Echarts2的最终版本，也是最好用的。Echarts3更改了很多配置项，每时每刻都有bug产生，Echarts2是稳定版本。

 

         
         
                   com.github.abel533
                   ECharts
                   2.2.7
         
         
                   com.google.code.gson
                   gson
                   [2.6.2,)
         
         

 

 

2）为了演示大数据量，从Sqlite数据库中获取的数据：是近三年中国各个地区每天的温度。

 

  
         
                   org.xerial
                   sqlite-jdbc
                   3.8.11.2
         
         
                   com.j256.ormlite
                   ormlite-jdbc
                   4.47
         
         

 

 

3）动态图表是后台springsocket推送数据，而不是简单的前台ajax js轮询。

 

         
          
           org.springframework 
           spring-websocket 
            ${spring.version} 
          
          
           org.springframework 
           spring-messaging 
           ${spring.version} 
         

 

 

4）Spring Socket推送的json数据，依赖jackson。

 

        
          com.fasterxml.jackson.core
           jackson-core
           2.4.4
       
       
           com.fasterxml.jackson.core
           jackson-databind
           2.4.4
       
       
          com.fasterxml.jackson.core
           jackson-annotations
           2.4.4
       

 

 

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轴的数据
    ListxAxisData;
   
    //Y轴的数据
    Map>yAxisData;
   
    //Y轴双轴情况下的位置定位
    MapyAxisIndex;

 

 

3.1.2折线图Line的Tag

 

唯一需要注意的是div的id和echarts里面的id应该是同一个。

 

 

3.2柱状图Bar

 

3.2.1柱状图Bar的数据格式

         

//X轴的数据
         privateList xAxisData;
        
         //Y轴的数据
         privateMap> yAxisData;
        
         //Y轴双轴情况下的位置定位
         privateMap yAxisIndex;

 

 

3.2.2柱状图Bar的Tag

 

 

 

 

3.3饼状图Pie

        

 

 

3.3.1饼图Pie的数据格式

         

//key-value数据
         privateMap orientData;

 

 

3.3.2饼状图Pie的tag

 

 

 

3.4玫瑰图Radar

3.4.1玫瑰图Radar的数据格式

        

 //二维表结构数据
         privateList> orientData;

 

 

3.4.2玫瑰图Radar的Tag

         

 

 

 

4高级图表

4.1双数值轴折线图lineDoubleNum

4.1.1双数值轴折线图lineDoubleNum的数据格式

        

  //每种类型数据是Double数组
         privateMap axisDataArr;

 

 

4.1.2双数值轴折线图lineDoubleNum的Tag

         

 

 

4.2搭配时间轴折线图lineTimeLine

4.2.1搭配时间轴折线图lineTimeLine的数据格式

         

 //X轴的数据
         ListxAxisData;
        
         //Y轴的数据
         Map>yAxisData;
        
         //Y轴双轴情况下的位置定位
         MapyAxisIndex;
        
         //TimeLine的Y轴数据
         List>>timelineAxisData;
        
         //TimeLine的X轴数据
         ListtimelineData;

 

 

4.2.2搭配时间轴折线图lineTimeLine的Tag

         

 

 

4.3反转条形图Bar

4.3.1反转条形图Bar的数据格式

         

 //X轴的数据
         privateList xAxisData;
        
         //Y轴的数据
         privateMap> yAxisData;
        
         //Y轴双轴情况下的位置定位
         privateMap yAxisIndex;

 

 

4.3.2反转条形图Bar的Tag