动态生成图表的设计与实现

周勇 叶刚

摘要

在系统的开发过程当中，对于数据的操作有时不仅仅在于用表格展示，很多业务数据需要对数据库中每条记录的特定项（可以单项也可以是多项）进行数据分析与统计，进而将数据统计的结果展示出来。对于上述数据统计结果的展示，在开发的过程中经常用图表或者表格在页面上展示出来，有时甚至二者同时使用根据图表的特性，他可以很直观的显示结果中的关键数据，所以在开发过程图表中大量使用。鉴于图表开发过程有很多重复性的工作，本文通过对单类型的Echart图表（饼状图，柱形图，折线图等单类型先图表，未涉及类型混合图表）的动态化设计，可视化的操作，数据化的管理，来避免开发者的重复工作。

【关键词】EchartMysq1 可视化

1 动态生成图表页面设计

动态生成图表指的是根据Echart的Option常用属性，对不同类型的图表的属性进行设值，通过调用后台

处理，在页面上显示出来，根据数据源不同在此分为静态数据与动态数据生成图表。Option常用属性的数据格式：{

title：{text："，subtext："}，

tooltip：ftrigger：'axis'），

toolbox：{show：false，feature：{magicType：{show：true，type：['line'，'bar']}}}，

xAxis：[{type：'category'，data：['1月'，'2月'，'3月'，'4月'，'5月'，'6月'，'7月'，'8月'，'9月'，'10月'，'11月'，'12月']}]，

yAxis：[{type：'value'，name："}]，

}

以下是动态生成图表设计：

1.1 静态数据生成图表页面设计

静态数据生成图表顾名思义就是Echart的Option属性是静态的常量数据，静态图表数据生成可以帮助完成图表实例，在前期开发过程中对不熟悉图表的开发者或者说不知道图表将要设计成什么样提供大大的便利。根据图表类型将该图表的特有属性进行页面设计，填入所属静态数据，检验数据格式，传入后台，后台调用数据展示图表。

1.2 动态数据生成图表页面设计

动态数据图表生设计与静态数据图表设计相当类似，唯一区别接入的数据不能直接使用，后台需要根据地址获取数据，同时后台需要实现动态数据的接口方法。

1.3 动态生成图表页面整合设计

根据上述设计，我们可以对静态数据图表与动态数据图表页面合二为一，取之相同的属性，然后根据数据源类型不同进行。

2 图表属性动态管理设计

为了避免开发者手动的书写重复的图表代码，我们需要在生成图表设计上对其进行数据化的管理。每一张图表对应着mysq1数据库中的一条记录，图表的属性对应着关系表（图表属性表）的项目，此处需要说明，表结构的设计需要图表类型属性，对于不同图表特有的属性，需要在关系表中作为单独的项目，同时根据数据源类型不同需要增添该项的标识项，以此区分。此处的设计，可以借助关系表图表属性进行可视化设计，方便属性的编辑以及预览图表。

数据化的管理图表属性是第一步，这只是方便管理属性，还未达到避免代码的重复工作。我们需要在生成图表设计的时候，获取完整的Echart的Option格式的数据，根据图表属性表的主键以及该数据形成一张Option的关系表，至此完成动态生成Echart的Option数据格式设计。

3 动态生成图表实现

3.1 动态生成图表实现

根据页面设计将不同类型图表的常用属性通过组件表现在页面上，通过组件控制指定类型图表的属性的组件的展示，完成页面开发。后台通过]s完成图表属性设值，调用图表方法实现图表生成功能，以下为主要代码：

var bar=echarts.init（document.getElementByld（'d2'），e_macarons）;

bar.clear（）;

bar.dispose（）;

bar.setOption（option）;

3.2 圖表属性动态管理实现

根据图表属性动态管理设计，设计图表属性表与Option代码表，动态生成的图表，可以通过后台讲页面上的图表属性值存入图表属性表中。后台通过js将属性转变为Option格式的对象option，通过JSON.stringify（option）将对象转变为字符串，通过后台存入Option代码表中。至此，Echart的Option属性与Option格式的数据通过关系表管理。至此，图表属性只需要通过页面设置，对于动态数据源只需要提供获取数据方法的入口。开发者不需要做重复的工作。另外，对于某些图表的特有属性，或者公共的不常用属性亦可以在特定的页面通过js加入Option代码表中，不必担心页面属性太过简单，无法实现图表。

4 总结

动态生成图表的设计与实现为开发者提供以下便利：通过数据化的管理图表属性，帮助开发者提前预览图表的实现情况，对于需要做调整的地方亦可以通过页面直接调整;为初次接触图表的开发者或者静态数据源的静态图表demo开发提供了便利;对于需要分析大量业务数据，通过图表展示结过的系统的开发，直接调用Option代码表中的数据，即可完成图表的生成工作，大大提高了开发者的工作效率。

参考文献

[1]马帅.论MySQL数据库教程开设的必要性[J].现代交际，2016（13）.

[2]温立辉.Spring框架在模型层的应用及原理[J].福建电脑，2017（05）.

[3]李杉，贾彦平，达虎.Mybatis逆向工程在JavaEE中的应用[J].通讯世界，2017（24）.

[4]雷云鹤，祝智庭.基于预学习数据分析的精准教学决策[J].中国电化教育，2016（06）.