scatter ajax,dhm-echarts: echarts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以...

dhm-echarts

echarts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以自定义适配器。以及分析预测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架构图：

1.1 web项目部署(红框为必要的JS和CSS)

1.2 Maven的POM引用:

com.duhongming

dhm-echarts-core

3.0.0.2

com.duhongming

dhm-echarts-calculate

3.0.0.2

org.springframework

spring-websocket

${spring.version}

org.springframework

spring-messaging

${spring.version}

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

2.1 页面图表div设置说明

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完成；

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按钮即可

2)刷新指定图表

$("#submitButton").click(function(){

$("#demo-line").dblclick();

});

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

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

2.4给图表添加点击事件

1)准备一个a html标签

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

…..

echarts-onclick-id="demo-bar-onclick"

>

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>

折线图和柱状图

EchartsPieAdapter

adapterPie

Map

饼状图

EchartsDoubleNumLineAdapter

adapterDoubleNumLine

Map

双数值折线图

EchartsReverseBarAdapter

adapterReverseBar

List>

反转柱状图

EchartsRadarAdapter

adapterRadar

List>

雷达图

EchartsMapAdapter

adapterMap

Map>

地图

EchartsScatterAdapter

linear:线性回归

exponential:指数回归

logarithmic:对数回归

polynomial:多项式回归

Object[][]

散点图

动态仪表(无适配器，只需要数据类型)

Socket协议

Double

动态仪表

动态注水图(无适配器，只需要数据类型)

Socket协议

Double

动态注水图

日历图(无适配器，只需要数据类型)

calendar：日历图

List>

日历图

多维数据(无适配器，只需要数据类型)

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>应该非常简单我就不具体说明了；

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

xxx 最高气温 最低气温

周一 11 11

……. ……. …….

相当于二维数据表数据，xxx代表X轴的数据，最高气温、最低气温代表Y轴数据，不用y0/y1在进行区分了。

页面:

/

即可

5)折线图条形图混合图

//指定每条曲线的类型

gsonOption.series().get(0).type(SeriesType.line);

gsonOption.series().get(1).type(SeriesType.bar);

3.3 adapterPie适配器数据类型

Map 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

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>应该非常简单我就不具体说明了；

3.6 adapterMap适配器数据类型

1)数据结构

--|类别Map

--|地名：指标Map>

Map>

{"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>应该非常简单我就不具体说明了；

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:

6 highcharts3D项目

1.引入JS

2.div标签只需bar或者pie后面加上3d

3.后台解析

eg: