codecamp

dhm-echarts说明书

dhm-echarts

echarts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。

项目地址：https://git.oschina.net/duhongming/dhm-echarts

项目交流QQ群：551709145 验证码：码云

1 Maven项目说明

  1. dhm-echarts-bean：echarts图表的所有Option对象的JavaBean封装，以及针对highcharts的3D柱状图和3D饼状图的JavaBean封装；
  2. dhm-echarts-calculate：echarts图表拟合曲线算法：多项式回归方程（通过散点拟合最优方程）、余弦相似度（曲线相似度）等算法；
  3. dhm-echarts-core：echarts图表基本图表配置、数据适配器、图表配置、点击事件数据结构封装；
  4. dhm-echarts-web：图表演示页面 http://127.0.0.1:8080/dhm-echarts-web/echarts/demo；
  5. dhm-echarts架构图： alt text

1.1 web项目部署（红框为必要的JS和CSS） alt text

1.2 Maven的POM引用:

    <!-- echarts图表java封装 -->  
    <dependency>
      <groupId>com.duhongming</groupId>
      <artifactId>dhm-echarts-core</artifactId>
      <version>3.0.0.2</version>
    </dependency>
    <!-- java封装计算算法 -->
    <dependency>
      <groupId>com.duhongming</groupId>
      <artifactId>dhm-echarts-calculate</artifactId>
      <version>3.0.0.2</version>
    </dependency>

     
     <!-- 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>

        
    <!-- 由于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 dhm-echarts-web项目

2.1 页面图表div设置说明

alt text

div属性 默认值 说明
id 无 id必须唯一
class echarts 必须是echarts
echarts-type line line：折线图
 bar：柱状图
 pie：饼状图 

rose：玫瑰图 
funnel：漏斗图 
radar：雷达图 
scatter：散点图
gauge：仪表盘
liquidfill：注水图
map：地图
calendar：日历图

pie3d：3D饼状图
 bar3d：3D柱状图

multidata-scatter：多维数据散点图
multidata-heatmap:多维数据热力图
echarts-title 图表标题 图表标题
echarts-link 无 图表标题链接
echarts-subtitle 图表副标题 图表副标题
echarts-sublink 无 图表副标题链接
echarts-theme 无 macarons/dark/infographic/roma/shine/vintage
echarts-toolbox false 是否需要工具栏
echarts-datazoom false 是否需要数据域
echarts-stack false 是否需要柱状堆积图
echarts-markpoint false 是否需要标记点
echarts-markline false 是否需要标记线
echarts-x-axis-name 无 X轴单位，eg: 日期(星期)
echarts-split-number 5 坐标轴的分割段数
echarts-min-interval 0.0 坐标轴最小间隔大小
echarts-y-axis-name 无 Y轴单位(两个Y轴单位，中间用逗号分隔)
eg: 最高温度(°C),最低温度(°C)
echarts-url 无 后台SpringMVC控制器，通过@RequestBody获取数据
echarts-socket 为空或没有则不是动态图表 后台是Spring Socket控制器，通过TextMessage传递数据
echarts-onclick-id 图表点击事件 关联a标签id
echarts-regression 散点图必要参数，否则不必要 只有echarts-type=scatter echarts-regression才有意义。
linear：线性回归拟合 
exponential：指数回归拟合
 logarithmic：对数回归拟合
 olynomial：多项式回归拟合
echarts-measure-range 量程 只有echarts-type=gauge才有意义
echarts-axis-label-show 是否显示刻度 只有echarts-type=gauge才有意义

2.2 Controller控制器中EchartsCore

1）创建EchartsCore对象，加载前台页面的属性参数，通过getBaseGsonOption获取gsonOption图表的基本配置都已经setter完成；

alt text

gsonOption可以进行自定义配置： //自定义配置 gsonOption.title().x(X.center); gsonOption.legend().left(X.left).orient(Orient.vertical);

2）通过adapterLineAndBar将数据setter进gsonOption，然后return gsonOption.toString()通过@ResponseBody返回到页面ajax中；

gsonOption可以不使用适配器： gsonOption中的series对象完成图表的显示；

2.3 页面ajax获取表单中的数据

1）有一个包裹form的标签，传递的button按钮即可

    <form>        
        <input name="dateStr" value="日期"/>
        <input name="temperatureStr" value="温度"/>
    </form>

2）刷新指定图表

    $("#submitButton").click(function(){
        $("#demo-line").dblclick();
    });

3）后台获取该图表的数据，已经保存在echartsConfig中

    System.out.println("测试传入参数："+echartsConfig.getParameters());

2.4给图表添加点击事件

1）准备一个a html标签

    <a id="demo-bar-onclick" href="${contextPath}/echarts/onclick"></a>

2）通过在div属性echarts-onclick-id关联a标签

    <div id="demo-bar" style="float:left" class="echarts"
    …..
    echarts-onclick-id="demo-bar-onclick"
    ></div>

3）当target="_jbox"会弹出对话框：

对话框宽度：jbox-width="1200"
对话框高度：jobx-height="400"
对话框标题：jbox-title="跳转dialog对话框-{seriesName}-{name}"，其中{seriesName}是点击图表所在的legend名称，{name}是点击图表所在的x轴的名称。

4） 后台取值：

/**
 * 获取参数到前台显示
 * 也可以通过制定控制器去请求其他图表的URL
 * @param echartsOnClick
 * @return
 */
@RequestMapping(value="onclick")
public String onclick(EchartsOnClick echartsOnClick,ModelMap modelMap){
    modelMap.put("echartsOnClick",echartsOnClick);
    return "onclick";
}

2.5整体图表Echarts背景水印

修改echarts.ajax.js中的var waterMarkText = 'Echarts' 即可，为空则没有背景水印。

3 dhm-echarts-core项目

3.1 echartsCore中调用的适配器

适配器 适配器方法 适配器数据类型 适配器说明
EchartsLineAndBarAdapter adapterLineAndBar List<Map<String,Object>> 折线图和柱状图
EchartsPieAdapter adapterPie Map<String,Object> 饼状图
EchartsDoubleNumLineAdapter adapterDoubleNumLine Map<String,Double[][]> 双数值折线图
EchartsReverseBarAdapter adapterReverseBar List<Map<String,Object>> 反转柱状图
EchartsRadarAdapter adapterRadar List<Map<String,Object>> 雷达图
EchartsMapAdapter adapterMap Map<String,Map<String,Double>> 地图
EchartsScatterAdapter linear:线性回归
exponential:指数回归

logarithmic:对数回归
polynomial:多项式回归		 Object[][] 散点图
动态仪表(无适配器，只需要数据类型) Socket协议 Double 动态仪表
动态注水图(无适配器，只需要数据类型) Socket协议 Double 动态注水图
日历图(无适配器，只需要数据类型) calendar：日历图 List<Map<String,Object>> 日历图
多维数据(无适配器，只需要数据类型) multidata-scatter：多维数据散点图
multidata-heatmap:多维数据热力图		 new EchartsHeatMap(list); 多维数据

3.2 adapterLineAndBar、adapterReverseBar适配器数据类型

1）数据库结构

    x:日期           y0:最高气温          y1:最低气温
    周一                11                  11
    …….                …….                 …….

2）说明 相当于二维数据表数据，x:代表X轴的数据，y0:代表Y轴左面的数据，y1:代表Y轴右面的数据

3）通过数据库sql语句到List<Map<String,Object>>应该非常简单我就不具体说明了；

4）socket（动态图表传递的数据结构）后台定时推送

    xxx           最高气温          最低气温
    周一             11                 11
    …….                …….                 …….
相当于二维数据表数据，xxx代表X轴的数据，最高气温、最低气温代表Y轴数据，不用y0/y1在进行区分了。
页面:<div echarts-socket="<%=basePath%>/webSocket/line/data">/</div>即可

5）折线图条形图混合图

    //指定每条曲线的类型
    gsonOption.series().get(0).type(SeriesType.line);
    gsonOption.series().get(1).type(SeriesType.bar);

3.3 adapterPie适配器数据类型

Map<String,Object> key-value这个是最简单的，怎么都能实现；

3.4 adapterDoubleNumLine适配器数据类型

1）数据结构

Object data[][] = new Object[][]{ {96.24, 11.35},{33.09, 85.11},{57.60, 36.61}, {36.77, 27.26},{20.10, 6.72},{45.53, 36.37},
{110.07, 80.13},{72.05, 20.88},{39.82, 37.15}, {48.05, 70.50},{0.85, 2.57},{51.66, 63.70}, {61.07, 127.13},{64.54, 33.59},{35.50, 25.01}, {226.55, 664.02},{188.60, 175.31},{81.31, 108.68} }; 二维数组中第一个是x轴数据，第二个是y轴数据，所以该二维数组就是一堆离散的点；

Map<String,Object[][]> Map中的泛型中的String是每条曲线的名称即legend；

2）说明

通过程序形成x，y轴的数据在同一个二维数组中即可；

3.5 adapterRadar适配器数据类型

1）数据结构

    x:name      y:预算分配（Allocated Budget）      y:实际开销（Actual Spending）  x:max
    销售（sales）           4300                  5000                         6500
    ……                    ………                  ……..                         …….

2）说明

相当于二维数据表数据，x:name代表雷达图中的每一极，x:max 代表雷达图每一极的最大值， y:预算分配（Allocated Budget）代表所有极组的名称， y:实际开销（Actual Spending）代表另一所有极组的名称；

3）通过数据库sql语句到List<Map<String,Object>>应该非常简单我就不具体说明了；

3.6 adapterMap适配器数据类型

1）数据结构

--|类别Map<String,XXX > --|地名：指标Map<XXX,Map<String,Double>> Map<String,Map<String,Double>>

    {"iphone3":
    {"北京":609.0,"重庆":99.0,"新疆":183.0,"广东":830.0,"天津":883.0,"浙江":335.0,"澳门":541.0,"广西":287.0,"内蒙古":728.0,"宁夏":704.0,"江西":877.0,"台湾":724.0,"贵州":206.0,"安徽":882.0,"陕西":151.0,"辽宁":126.0,"山西":594.0,"青海":184.0,"香港":243.0,"四川":798.0,"江苏":100.0,"河北":191.0,"西藏":210.0,"福建":516.0,"吉林":975.0,"海南":994.0,"云南":155.0,"上海":690.0,"湖北":255.0,"湖南":120.0,"甘肃":471.0,"山东":398.0,"河南":937.0,"黑龙江":467.0},
    "iphone4":
    {"北京":949.0,"重庆":809.0,"新疆":1.0,"香港":856.0,"四川":526.0,"广东":658.0,"天津":6.0,"浙江":754.0,"河北":803.0,"澳门":649.0,"西藏":629.0,"福建":746.0,"内蒙古":684.0,"吉林":876.0,"上海":213.0,"宁夏":337.0,"江西":324.0,"安徽":481.0,"山西":361.0},
    "iphone5":
    {"上海":672.0,"北京":423.0,"香港":376.0,"台湾":45.0,"广东":463.0,"天津":742.0,"澳门":375.0}}

3.7散点图适配器数据类型

Double data[][] = new Double[][]{ {96.24, 11.35},{33.09, 85.11},{57.60, 36.61}, {36.77, 27.26},{20.10, 6.72},{45.53, 36.37},
{110.07, 80.13},{72.05, 20.88},{39.82, 37.15}, {48.05, 70.50},{0.85, 2.57},{51.66, 63.70}, {61.07, 127.13},{64.54, 33.59},{35.50, 25.01}, {226.55, 664.02},{188.60, 175.31},{81.31, 108.68} }; 二维数组中第一个是x轴数据，第二个是y轴数据，所以该二维数组就是一堆离散的点；

3.8日历图适配器数据类型

1）数据库结构

echartsDate 工作 睡觉 娱乐 2017-05-01 10 8 6 2017-05-02 8 10 6

2）说明 相当于二维数据表数据，echartsDate 代表日历的数据，工作、睡觉、娱乐数据类别；

3）通过数据库sql语句到List<Map<String,Object>>应该非常简单我就不具体说明了；

3.9多维数据适配器数据类型

1）数据库结构

x y z 2017-06-19 工作票 00 2017-06-20 工作票 10 2017-06-20 操作票 11 2017-06-21 操作票 21

2）调用EchartsHeatMap

EchartsHeatMap echartsHeatMap = new EchartsHeatMap(list);

4 dhm-echarts-calculate项目

计算拟合曲线算法，通过多项式回归分析，找出R^2最优的表达式拟合曲线；

4.1 放入观测值

Double data[][]中的数组分别代表{x,y} Double data[][] = new Double[][]{ {4d,38.8},{5d,129.6},{6d,259.9},{7d,447.1},{8d,702.5}, {9d,1015.2},{10d,1346.5},{11d,1665.1},{12d,1927.8},{12.4,2000d}, {13d,2000d},{14d,2000d},{15d,2000d},{16d,2000d},{17d,2000d},{18d,2000d}, {19d,2000d},{20d,2000d},{21d,2000d},{22d,2000d},{23d,2000d},{24d,2000d},{25d,2000d} };

4.2 拟合度最好的即R^2最接近1的曲线

String expression = new PolynomialCurveCore().polynomialCurveExpresionAll(data);

4.3准备观测值X轴数据重新拟合下看看

Double d[] = new Double[data.length];

4.4重新生成通过拟合方程计算的Y轴的值

Double newData[][] = FelCore.getResult(expression,d)

5 dhm-echarts-bean项目

我是fork GitHub上的一位同仁的代码： https://git.oschina.net/free/ECharts eg: alt text

6 highcharts3D项目 1.引入JS alt text 2.div标签只需bar或者pie后面加上3d alt text 3.后台解析 alt text
eg: alt text
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录
dhm-echarts说明书

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }