dhm-echarts

通过自定义div，ajax提交数据实现echarts图表展示

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

0 系统架构图 alt text

1 Maven项目说明

dhm-echarts-bean：echarts图表的所有Option对象的JavaBean封装；
dhm-echarts-calculate：echarts图表拟合曲线算法：多项式回归方程等算法；
dhm-echarts-core：echarts图表基本图表配置+数据适配器；
dhm-echarts-web：图表演示页面 http://127.0.0.1:8080/dhm-echarts-web/echarts/demo；

1.1 web项目部署 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：注水图
echarts-title	图表标题	图表标题
echarts-link	无	图表标题链接
echarts-subtitle	图表副标题	图表副标题
echarts-sublink	无	图表副标题链接
echarts-theme	无	macarons/dark/infographic/roma/shine/vintage
echarts-toolbox	false	是否需要工具栏
echarts-datazoom	false	是否需要数据域
echarts-x-axis-name	无	X轴单位，eg: 日期(星期)
echarts-y-axis-name	无	Y轴单位(两个Y轴单位，中间用逗号分隔) eg: 最高温度(°C),最低温度(°C)
echarts-url	无	后台SpringMVC控制器，通过@RequestBody获取数据
echarts-regression	散点图必要参数，否则不必要	只有echarts-type=scatter echarts-regression才有意义。 linear：线性回归拟合 exponential：指数回归拟合 logarithmic：对数回归拟合 olynomial：多项式回归拟合
echarts-socket	为空或没有则不是动态图表	后台是Spring Socket控制器，通过TextMessage传递数据

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());

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>>`	雷达图

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

3.3 adapterPie适配器数据类型

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

3.4 adapterDoubleNumLine适配器数据类型

1）数据结构

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轴数据，所以该二维数组就是一堆离散的点；

Map<String,Double[][]>
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>>应该非常简单我就不具体说明了；

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

alt text

裴永余 / dhm-echarts

dhm-echarts

简介

发行版

贡献者

近期动态

裴永余 / dhm-echarts .gitee-modal { width: 500px !important; }

dhm-echarts

简介

发行版

贡献者

近期动态

搜索帮助

裴永余 / dhm-echarts