dhm-echarts
echarts3图表封装,前台ajax通过自定义div属性实现传值,后台通过各种数据适配器自动组装达到图表封装,以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。
项目地址:https://git.oschina.net/duhongming/dhm-echarts
项目交流QQ群:551709145 验证码:码云
目录
1 Maven项目说明
2 dhm-echarts-web项目
3 dhm-echarts-core项目
4 dhm-echarts-calculate项目
5 dhm-echarts-bean项目
6 highcharts3D项目
附录
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
dhm-echarts-springboot:图表演示页面和(dhm-echarts-web)两种展示风格
dhm-echarts架构图:
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引用
<!-- 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:折线图 bar:柱状图 pie:饼状图 rose:玫瑰图 funnel:漏斗图 radar:雷达图 scatter:散点图 gauge:仪表盘 liquidfill:注水图 map:地图 calendar:日历图 pie3d:3D饼状图 bar3d:3D柱状图 multidata-scatter:多维数据散点图 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轴单位,中间用逗号分隔) 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才有意义。 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完成
/**
* 折线图
* @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按钮即可
<form>
<input name="dateStr" value="日期"/>
<input name="temperatureStr" value="温度"/>
</form>
<button id="submitButton">测试传入参数</button>
2)刷新指定图表
$("#submitButton").click(function(){
$("#demo-line").dblclick();
});
#注意:dblclick()要替换成contextmenu(),因为我能通过js控制鼠标不能右击,而通过js控制图表右击点击事件,只有这一个通道供echarts使用。
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中调用的适配器
所模拟的数据都可以通过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:线性回归 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)数据库结构
列1 | 列2 | 列3 | 列n | |
---|---|---|---|---|
x:日期 | y0:最高气温 | y1:最低气温 | … | |
行1 | 周一 | 11 | 11 | … |
行2 | 周二 | 22 | 22 | … |
行n | … | … | … | … |
2)说明
相当于二维数据表数据,x:代表X轴的数据,y0:代表Y轴左面的数据,y1:代表Y轴右面的数据
3)通过数据库sql语句到List
<div echarts-socket="<%=basePath%>/webSocket/line/data">/</div>即可
6)折线图条形图混合图
//指定每条曲线的类型
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)数据结构
列1 | 列2 | 列3 | 列4 | 列n | |
---|---|---|---|---|---|
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
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)数据库结构
列1 | 列2 | 列3 | 列n | |
---|---|---|---|---|
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)数据库结构
列1 | 列2 | 列3 | |
---|---|---|---|
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:
6 highcharts3D项目
1.引入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
<!-- 为 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.后台解析
/**
* 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:
附录
附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
https://github.com/almende/vis
附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/
https://github.com/dabeng/OrgChart
https://sbstjn.com/timesheet.js/
https://github.com/sbstjn/timesheet.js