介绍一下使用Echarts做数据统计分析,如何实现支持折线图的添加、删除、编辑更新至数据库,其中后端使用spring+mybatis+mysql,前端使用bootstrap布局配合bootstrap-datepicker、bootstrap-tags、bootstrap-dialog和echarts插件。
设计
首先看下截图有个直观的对各要素的了解。然后具体展开各个元素。
整个页面采用bootstrap布局,具体样式就不赘述了。显示的为某一天24小时内每分钟的订单量。
然后可以看到导航栏下方右侧是echarts图表区,用于展示图表,右上角是图表工具栏,依次为数据视图、还原、开启区域缩放/关闭、保存图片、柱状/折线图切换。
左侧自上至下依次是一个日期选择组件、3个功能按钮、标签组件(用于列出、删除某一天的数据,便于操作)。
3个功能按钮分别为添加某一天(日期选择框)的数据、清空图表展示内容(不删除后台数据,只清空图表)、在数据视图编辑数据后更新当前数据至后台数据库。
实现
数据表
首先简单介绍下数据表结构:
1 | CREATE TABLE `flight_minute` ( |
数据示例:
1 | '1', '2017-06-01 00:00:00', '129' |
后端
后端具体设计不赘述,重点说下后端的接口,以及批量更新操作。
接口
1 | /flight_minute_orders/date/{date} //获取某一天的数据 |
批量更新
controller接口定义:可以看到接收参数为json格式的对象数组,其中FlightMinuteModel为数据库持久层对象。
1 | "/update", method = { RequestMethod.POST }) (value = |
mybatis中XXXMapper.xml中的相关配置:
1 | <update id="batchUpdate" parameterType="java.util.List"> |
前端
html页面
首先看下页面html代码:没啥好说的,依次为导航栏、日期组件、按钮组、标签组件以及echarts容器(id=main的div)。
1 |
|
接下来是重点!js文件中的内容。
创建echarts实例
首先echarts容器中创建echarts实例:
不得不提echarts很蛋疼的一点,就是其容器必须指定宽高,而为了适应不同大小的屏幕,这里采用了先获得浏览器窗口(window)的宽高,再通过减去一定像素得到echarts容器大小。如下:
1 | //获得容器 |
之后为了适应页面大小变化时,容器能自适应调整大小:
1 | //window大小变化时,chart自动调整 |
创建日期选择器
1 | function buildDatepicker() { |
构建横轴24小时每分钟数据
1 | //获取24小时内每隔一分钟的时间数组(默认) |
创建echarts的初始option
各个配置项的含义可参考echarts官网,这里的个性化配置主要是工具栏、缩放条、X轴指示器。
1 | var option = { |
创建标签组件
因为标签组件带有“X”(删除)标记,涉及到删除折线(afterDeletingTag配置项,即删除option.series中对应的数据再setOption),所以放到这里介绍
1 | function bulidTags() { |
添加某天数据到图表
主要是请求后端获取数据后,更新option,然后调用setOption展示。
1 | //响应用户请求,展示某天数据 |
清空图表数据
实际上就是对标签组件中的每个日期,调用删除标签
1 | function clearCharts() { |
更新数据到数据库
由于用户可以在数据视图中编辑数据,所以想到了可以利用此处的数据作为更新后的数据来支持更新数据库操作,当然这么大量数据肯定要用批量更新,同时,采用只更新修改过的数据可以提高执行效率。也可以考虑直接在图表视图中拖拽线条来编辑数据,这个功能echarts本身没提供,需要自定义实现,之后有时间会考虑实现这种方式。
数据视图如下:
点右下角刷新后点击更新按钮,将当前数据更新至数据库。
通过查看工具栏中数据视图的源码可以发现刷新操作是利用当前编辑栏的数据new了一个newOption再setOption完成,并没有修改原有的option对象,所以不能通过原有option获得当前数据,而是通过echarts.getOption来拿到当前数据。看刷新操作源码,可以发现最后一部分是通过事件触发器来触发setOption(newOption)操作。所以可以通过newOption与option对比来得到数据项是否有修改。
更新代码如下。
1 | function update() { |
完整代码
js完整代码如下:
1 | $(function () { |
代码已开源至Github。由于有一些内容依赖公司组件,所以clone下来并不能直接运行,需要剔除这些部分,如有疑问欢迎在评论交流。