# dhm-echarts

**Repository Path**: shieldzhang/dhm-echarts

## Basic Information

- **Project Name**: dhm-echarts
- **Description**: echarts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 102
- **Created**: 2017-11-08
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <center>dhm-echarts</center>

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

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

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

# 目录
[1 Maven项目说明](#1-maven项目说明-1)
----
+ [1.1 web项目部署（echarts min 部署）](#11-web项目部署echarts-min-部署)

+ [1.2 web项目部署（echarts all 部署）](#12-web项目部署echarts-all-部署)

+ [1.3 web项目部署（3D 图表 部署）](#13-web项目部署3d-图表-部署)

+ [1.4 Maven的POM引用](#14-maven的pom引用)

[2 dhm-echarts-web项目](#2-dhm-echarts-web项目-1)
----
+ [2.1 页面图表div设置说明）](#21-页面图表div设置说明)

+ [2.2 Controller控制器中EchartsCore](#22-controller控制器中echartscore)

+ [2.3 页面ajax获取表单中的数据](#23-页面ajax获取表单中的数据)

+ [2.4 给图表添加点击事件](#24-给图表添加点击事件)

+ [2.5 整体图表Echarts背景水印](#25整体图表echarts背景水印)

[3 dhm-echarts-core项目](#3-dhm-echarts-core项目-1)
----
+ [3.1 echartsCore中调用的适配器](#31-echartscore中调用的适配器)

+ [3.2 adapterLineAndBar、adapterReverseBar适配器数据类型](#32-adapterlineandbaradapterreversebar适配器数据类型)

+ [3.3 adapterPie适配器数据类型](#33-adapterpie适配器数据类型)

+ [3.4 adapterDoubleNumLine适配器数据类型](#34-adapterdoublenumline适配器数据类型)

+ [3.5 adapterRadar适配器数据类型](#35-adapterradar适配器数据类型)

+ [3.6 adapterMap适配器数据类型](#36-adaptermap适配器数据类型)

+ [3.7 散点图适配器数据类型](#37-散点图适配器数据类型)

+ [3.8 日历图适配器数据类型](#38-日历图适配器数据类型)

+ [3.9 多维数据适配器数据类型](#39-多维数据适配器数据类型)

[4 dhm-echarts-calculate项目](#4-dhm-echarts-calculate项目-1)
----
[5 dhm-echarts-bean项目](#5-dhm-echarts-bean项目-1)
----
[6 highcharts3D项目](#6-highcharts3d项目-1)
----
[附录](#附录-1)
----
+ [附Echarts项目](#附echarts项目)

+ [附Highcharts插件](#附Highcharts插件)

+ [附Vis插件](#附Vis插件)

+ [附Socket插件](#附Socket插件)

+ [附UI页面](#附UI页面)

## 1 Maven项目说明

+ dhm-echarts-bean：echarts图表的所有Option对象的JavaBean封装，以及针对highcharts的3D柱状图和3D饼状图的JavaBean封装

+ dhm-echarts-calculate：echarts图表拟合曲线算法：多项式回归方程（通过散点拟合最优方程）、余弦相似度（曲线相似度）等算法

+ dhm-echarts-core：echarts图表基本图表配置、数据适配器、图表配置、点击事件数据结构封装

+ dhm-echarts-web：图表演示页面 http://localhost:8080/dhm-echarts-web/echarts/demo

	新版测试地址：http://localhost:8080/dhm-echarts-web/

+ dhm-echarts-springboot：图表演示页面和（dhm-echarts-web）两种展示风格

+ dhm-echarts架构图：
![alt text](http://git.oschina.net/duhongming/dhm-echarts/raw/master/doc/images/echarts-core.png "系统架构图")


### 1.1 web项目部署（echarts min 部署）
```
<!-- 必要文件：引入jquery -->
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- ECharts必要文件 -->
<script src="${ctxStatic}/echarts/echarts.min.js"></script>
<!-- 引入 ECharts ajax自定义封装 -->
<script src="${ctxStatic}/echarts/echarts.ajax.js"></script>
<!-- 引入 ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 360px;
    width: 740px;
    overflow: hidden;
    padding : 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
```
### 1.2 web项目部署（echarts all 部署）
```
<!-- 必要文件：引入jquery -->
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>

<!-- 动态图表文件：sockjs必须要放在echarts.min.js上面、jquery-1.8.3.min.js下面,防止JS冲突 -->
<script src="${ctxStatic}/sockjs/sockjs-1.1.1.min.js" type="text/javascript"></script>

<!-- ECharts必要文件 -->
<script src="${ctxStatic}/echarts/echarts.min.js"></script>
<!-- ECharts统计分析 -->
<script src="${ctxStatic}/echarts/ecStat.min.js"></script>
<!-- ECharts注水图 -->
<script src="${ctxStatic}/echarts/echarts-liquidfill.min.js"></script>
<!-- 引入 ECharts 主题 -->
<script src="${ctxStatic}/echarts/theme/dark.js"></script>
<script src="${ctxStatic}/echarts/theme/infographic.js"></script>
<script src="${ctxStatic}/echarts/theme/macarons.js"></script>
<script src="${ctxStatic}/echarts/theme/roma.js"></script>
<script src="${ctxStatic}/echarts/theme/shine.js"></script>
<script src="${ctxStatic}/echarts/theme/vintage.js"></script>
<!-- 引入 ECharts 地图 -->
<script src="${ctxStatic}/echarts/map/china.js"></script>
<!-- 引入 ECharts ajax自定义封装 -->
<script src="${ctxStatic}/echarts/echarts.ajax.js"></script>

<!-- 弹出dialog -->
<link rel="stylesheet" type="text/css" href="${ctxStatic}/layui/build/css/codeshow.css">
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>

<!-- 引入 ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 360px;
    width: 740px;
    overflow: hidden;
    padding : 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>
```
### 1.3 web项目部署（3D 图表 部署）
```
<!-- HighCharts单文件引入 -->
<script src="${ctxStatic}/highcharts/code/highcharts.js"></script>
<script src="${ctxStatic}/highcharts/code/highcharts-3d.js"></script>
<!-- HighCharts导出引入 -->
<script src="${ctxStatic}/highcharts/code/modules/exporting.js"></script>
<!-- HighCharts导出工具类 -->
<script src="${ctxStatic}/export-csv/export-csv.js"></script>
<!-- HighCharts工具类 highchartTable单文件引入 -->
<script src="${ctxStatic}/jquery-highchartTable-plugin/jquery.highchartTable.js"></script>
<!-- HighCharts汉化工具类（放到最后进行汉化） -->
<script src="${ctxStatic}/highcharts-zh_CN/highcharts-lang-zh_CN.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/grid-light.js"></script>
<!-- HighCharts主题
<script src="${ctxStatic}/highcharts/code/themes/dark-green.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/dark-blue.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/dark-unica.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/gray.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/grid.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/sand-signika.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/skies.js"></script>-->
```
## 1.4 Maven的POM引用
```xml
<!-- 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设置说明
```
		<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-line" style="float:left" class="echarts"
			echarts-type="line"
			echarts-title="未来一周气温变化"
			echarts-link="https://www.baidu.com/"
			echarts-subtitle="折线图"
			echarts-sublink="https://www.baidu.com/"
			echarts-theme="macarons"
			echarts-toolbox="true"
			echarts-datazoom="true"
			echarts-markpoint="true"
			echarts-markline="true"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="最高温度(°C),最低温度(°C)"
			echarts-url="${contextPath}/echarts/line"
		></div>
```

div属性 |	默认值 |	说明
---|--- |---
Html属性：id | 无	| id必须唯一
Html属性：class|	echarts	|必须是echarts
Echarts基础属性： echarts-type | line	| line：折线图<br> bar：柱状图<br> pie：饼状图 <br><br>rose：玫瑰图 <br>funnel：漏斗图 <br>radar：雷达图 <br>scatter：散点图<br>gauge：仪表盘<br>liquidfill：注水图<br>map：地图<br>calendar：日历图<br><br>pie3d：3D饼状图<br> bar3d：3D柱状图<br><br>multidata-scatter：多维数据散点图<br>multidata-heatmap:多维数据热力图
Echarts基础属性： echarts-title|	图表标题	|图表标题
Echarts基础属性： echarts-link|	无	|图表标题链接
Echarts基础属性： echarts-subtitle	|图表副标题	|图表副标题
Echarts基础属性： echarts-sublink|	无	|图表副标题链接
Echarts基础属性： echarts-theme	|无	|macarons/dark/infographic/roma/shine/vintage
Echarts组件：echarts-toolbox	|false	|是否需要工具栏
Echarts组件：echarts-datazoom|	false	|是否需要数据域
Echarts组件：echarts-stack|	false	|是否需要柱状堆积图
Echarts组件：echarts-markpoint|	false|	是否需要标记点
Echarts组件：echarts-markline|	false|	是否需要标记线
Echarts坐标轴：echarts-x-axis-name	|无	|X轴单位，eg: 日期(星期)
Echarts坐标轴：echarts-split-number|	5	|坐标轴的分割段数
Echarts坐标轴：echarts-min-interval|	0.0	|坐标轴最小间隔大小
Echarts坐标轴：echarts-y-axis-name	|无	|Y轴单位(两个Y轴单位，中间用逗号分隔)<br>eg: 最高温度(°C),最低温度(°C)
Echarts跳转：echarts-url	|无	|后台SpringMVC控制器，通过@RequestBody获取数据
Echarts跳转：echarts-socket|为空或没有则不是动态图表|后台是Spring Socket控制器，通过TextMessage传递数据
Echarts跳转：echarts-onclick-id|图表点击事件|关联a标签id
其他：echarts-regression|散点图必要参数，否则不必要|只有echarts-type=scatter echarts-regression才有意义。<br>linear：线性回归拟合 <br>exponential：指数回归拟合<br> logarithmic：对数回归拟合<br> olynomial：多项式回归拟合
其他：echarts-measure-range	|量程	|只有echarts-type=gauge才有意义
其他：echarts-axis-label-show	|是否显示刻度	|只有echarts-type=gauge才有意义

### 2.2 Controller控制器中EchartsCore

1）创建EchartsCore对象，加载前台页面的属性参数，通过getBaseGsonOption获取gsonOption图表的基本配置都已经setter完成
```
/**
 * 折线图
 * @param echartsConfig
 * @return
 */
@RequestMapping(value="line")
public @ResponseBody String line(@RequestBody EchartsConfig echartsConfig){
	System.out.println("测试传入参数："+echartsConfig.getParameters());
	return EchartsCore.getInstance().adapterLineAndBar(echartsConfig,dataService.getWeatherData()).toString();
}
```

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

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

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

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

1）有一个包裹form的标签，传递的button按钮即可
```html
	<form>		
		<input name="dateStr" value="日期"/>
		<input name="temperatureStr" value="温度"/>
	</form>
	<button id="submitButton">测试传入参数</button>
```

2）刷新指定图表
```js
	$("#submitButton").click(function(){
		$("#demo-line").dblclick();
	});
	#注意:dblclick()要替换成contextmenu(),因为我能通过js控制鼠标不能右击，而通过js控制图表右击点击事件，只有这一个通道供echarts使用。
```

3）后台获取该图表的数据，已经保存在echartsConfig中
```java
	System.out.println("测试传入参数："+echartsConfig.getParameters());
```

### 2.4 给图表添加点击事件

1）准备一个a html标签
```xml
	<a id="demo-bar-onclick" href="${contextPath}/echarts/onclick"></a>
```

2）通过在div属性echarts-onclick-id关联a标签
```xml
	<div id="demo-bar" style="float:left" class="echarts"
	…..
	echarts-onclick-id="demo-bar-onclick"
	></div>
```

3）当target=\"\_jbox\"会弹出对话框
```xml
对话框宽度：jbox-width="1200"
对话框高度：jobx-height="400"
对话框标题：jbox-title="跳转dialog对话框-{seriesName}-{name}"，其中{seriesName}是点击图表所在的legend名称，{name}是点击图表所在的x轴的名称。
```
4）	后台取值
```java
/**
 * 获取参数到前台显示
 * 也可以通过制定控制器去请求其他图表的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中调用的适配器
		所模拟的数据都可以通过Mybatis、Hibernate、Spring JDBC、Spring JPA
		生成多行的二维表格式：
				List<Map<String,Object>>
				List<T>
				List<Object[]>
		生成单行的二维表格式：Map<String,Object>

适配器|适配器方法|适配器数据类型|适配器说明
---|---|---|---
EchartsLineAndBarAdapter|adapterLineAndBar|```List<Map<String,Object>>```|折线图和柱状图
EchartsPieAdapter|adapterPie|```Map<String,Object>```|饼状图
EchartsDoubleNumLineAdapter|adapterDoubleNumLine|```Map<String,List<T>>```|双数值折线图
EchartsReverseBarAdapter|adapterReverseBar|```List<Map<String,Object>>```|反转柱状图
EchartsRadarAdapter|adapterRadar|```List<Map<String,Object>>```|雷达图
EchartsMapAdapter|adapterMap|```Map<String,Map<String,Double>>```|地图
EchartsScatterAdapter|linear:线性回归<br>exponential:指数回归<br><br>logarithmic:对数回归<br>polynomial:多项式回归|```Object[][]```|散点图
动态仪表(无适配器，只需要数据类型)|	Socket协议	|Double	|动态仪表
动态注水图(无适配器，只需要数据类型)|	Socket协议	|Double	|动态注水图
日历图(无适配器，只需要数据类型)|calendar：日历图|```List<Map<String,Object>>```|日历图
多维数据(无适配器，只需要数据类型)|multidata-scatter：多维数据散点图<br>multidata-heatmap:多维数据热力图|```new EchartsHeatMap(list);```|多维数据

### 3.2 adapterLineAndBar、adapterReverseBar适配器数据类型

1）数据库结构

&ensp;|列1|列2|列3|列n
---|---|---|---|---
&ensp;|x:日期|y0:最高气温|y1:最低气温|...
行1|周一|11|11|...
行2|周二|22|22|...
行n|...|...|...|...

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

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

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

&ensp;|列1|列2|列3|列n
---|---|---|---|---
&ensp;|xxx|最高气温|最低气温|...|...|...
行1|周一|11|11|...|...
行2|周二|22|22|...
行n|...|...|...|...
相当于二维数据表数据，xxx代表X轴的数据，最高气温、最低气温代表Y轴数据，不用y0/y1在进行区分了

5）页面
```
<div echarts-socket="<%=basePath%>/webSocket/line/data">/</div>即可
```
6）折线图条形图混合图
```java
	//指定每条曲线的类型
	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）数据结构
```
Map<String,List<Map<String,Object>>>
Map<String,List<T>>
Map<String,List<Object[]>>

Map中的泛型中的String是每条曲线的名称即legend,即每条曲线的名字

所模拟的数据都可以通过Mybatis、Hibernate、Spring JDBC、Spring JPA
生成多行的二维表格式,如以下三种，其实他们三个是同一个，可互相转换，通过一个适配器完成三种泛型的适配：
		List<Map<String,Object>>（sql只需要两个列，第一列必须是x轴数据，第二列必须是y轴数据）
		List<T>（注意该JavaBean，成员变量第一个必须是x轴数据，第二个必须是y轴数据）
		List<Object[]>（echarts所需数据类型，可以通过上述两个转化成，而上述两个就是jdbc的通用数据类型）
```
2）代码实现
```
	EchartsCore.getInstance().adapterDoubleNumLine(echartsConfig,Map<String,List<T>>).toString()
```

### 3.5 adapterRadar适配器数据类型

1）数据结构

&ensp;|列1|列2|列3|列4|列n
---|---|---|---|---|---
&ensp;|x:name|y:预算分配（Allocated Budget）|y:实际开销（Actual Spending）|x:max|...
行1|销售（sales）|4300|5000|6500|...
行2|管理（Administration）|10000|14000|16000|...
行3|信息技术（Information Techology）|28000|28000|30000|...
行n|...|...|...|...|...

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

```json
	{"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）数据库结构

&ensp;|列1|列2|列3|列n
---|---|---|---|---
&ensp;|echartsDate|工作|睡觉|娱乐
行1|2017-05-01|10|8|6
行2|2017-05-02|8|10|6
行n|...|...|...|...|...

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

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

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

1）数据库结构

&ensp;|列1|列2|列3
---|---|---|---
&ensp;|x|y|z
行1|2017-06-19|工作票|00
行2|2017-06-20|工作票|10
行3|2017-06-20|操作票|11
行4|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](http://git.oschina.net/duhongming/dhm-echarts/raw/master/doc/images/echarts_demo.png "echarts图表")

## 6 highcharts3D项目
1.引入JS
```js
		<!-- HighCharts单文件引入 -->
		<script src="${ctxStatic}/highcharts/code/highcharts.js"></script>
		<script src="${ctxStatic}/highcharts/code/highcharts-3d.js"></script>
		<!-- HighCharts汉化工具类（放到最后进行汉化） -->
		<script src="${ctxStatic}/highcharts-zh_CN/highcharts-lang-zh_CN.js"></script>
```
2.div标签只需bar或者pie后面加上3d
```html
		<!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-bar3d" style="float:left" class="echarts"
			echarts-type="bar3d"
			echarts-title="未来一周气温变化"
			echarts-subtitle="条形图"
			echarts-theme="macarons"
			echarts-toolbox="false"
			echarts-datazoom="false"
			echarts-x-axis-name="日期(星期)"
			echarts-y-axis-name="温度(°C)"
			echarts-url="${contextPath}/highcharts/bar3d"
		></div>
		<!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
		<div id="demo-pie3d" style="float:left" class="echarts"
			echarts-type="pie3d"
			echarts-title="搜索引擎现状"
			echarts-subtitle="饼状图"
			echarts-theme="macarons"
			echarts-url="${contextPath}/highcharts/pie3d"
		></div>
```
3.后台解析
```java
	/**
	 * 3D条形图
	 * @param echartsConfig
	 * @return
	 */
	@RequestMapping(value="bar3d")
	public @ResponseBody String bar3d(@RequestBody EchartsConfig echartsConfig){
		//配置
		HighChartsCore highChartsCore = HighChartsCore.getInstance();
		GsonOption gsonOption = highChartsCore.getBaseGsonOption(echartsConfig);
		gsonOption = highChartsCore.adapterBar3D(echartsConfig, gsonOption, getBarData());
		System.out.println("测试传入参数："+echartsConfig.getParameters());
		return gsonOption.toString();
	}

	/**
	 * 3D饼状图
	 * @param echartsConfig
	 * @return
	 */
	@RequestMapping(value="pie3d")
	public @ResponseBody String pie3d(@RequestBody EchartsConfig echartsConfig){
		//配置
		HighChartsCore highChartsCore = HighChartsCore.getInstance();
		GsonOption gsonOption = highChartsCore.getBaseGsonOption(echartsConfig);
		gsonOption = highChartsCore.adapterPie3D(echartsConfig, gsonOption, getPieData());
		return gsonOption.toString();
	}
```
**eg:**
![alt text](http://git.oschina.net/duhongming/dhm-echarts/raw/master/doc/images/highcharts_demo.png "highcharts 3D图表")

## 附录
### 附Echarts项目

0）echarts

https://github.com/ecomfe/echarts

history：echarts.min3.5.4.js

now：echarts.min3.7.2.js

1）echarts统计插件

https://github.com/ecomfe/echarts-stat

2）echarts注水图插件

https://github.com/ecomfe/echarts-liquidfill

3）echarts字符云插件

https://github.com/ecomfe/echarts-wordcloud


### 附Highcharts插件

0）	highcharts

https://github.com/highcharts/highcharts

1）	highcharts导出CSV插件

https://github.com/highcharts/export-csv

2）	highcharts汉化插件

https://github.com/hcharts/highcharts-zh_CN

3）	highcharts表格插件

https://github.com/highchartTable/jquery-highchartTable-plugin

### 附Vis插件
http://visjs.org/#download_install

### 附Socket插件

1）sockjs-client（SpringMVC）

https://github.com/sockjs/sockjs-client

2）stomp-websocket（SpringBoot）

https://github.com/jmesnil/stomp-websocket

### 附UI页面

1）layui

https://github.com/sentsin/layui/