6个步骤，7个文件，千行代码，so easy ！
要开发一款图表，首先要清楚所用前端库的一些基础接口，此图表类型的数据结构。
以echarts三维柱形图(一下简称DEMO)为例，开发之前要知道：
1.数据结构
2.前台图表实例化api：echarts.init(dom)，配置项api:instance.setOption(option)。
第一步:
定义图表所需数据结构xxxDataConfig，继承抽象类AbstractDataConfig。
eg ：
声明变量x、y、z（保存配置的xyz轴数据的字段名称）。
实现抽象方法：readXML（模板读取）&& writeXML（模板写入）&& clone && equals && hashCode && dataSetFields（返回由声明的变量组成的数组，用于预览时取数据库取数）。
其中，供开发者使用的readExtendedField&writeExtendedField方法的第二个参数是字段写入模板对应的key。
第二步：
定义前台图表对象xxxWrapper.js，指定图表库的初始图表接口。
eg：demoWrapper
第三步：
定义后台图表对象xxxChart，继承抽象类AbstractChart。注意点：继承的时候别忘了指定泛型DemoDataConfig，即extends AbstractChart<DemoDataConfig>。
eg:
实现抽象方法：getChartID （图表标志ID）&& getChartName(图表名称) && demoImagePath （图表选择界面图片路径） && addJSON （预览时生成的json对象，即图表展现所需配置项option && requiredJS （前端图表库js文件）&& wrapperName（前端图表对象，即第二步定义的对象名称）。
其中，获取某字段对应的数据库数据使用方法dataConfig.getX().getValues()）。
第四步：数据界面。
数据集数据界面xxxTableDataPane，继承抽象类AbstractExtendedChartTableDataPane。注意点：extends AbstractExtendedChartTableDataPane<DemoDataConfig>
eg：
声明变量下拉框 x、y、z。
实现抽象方法：fieldLabel （标签名称）&& filedComboBoxes （下拉框数组）&& populate （属性设置到界面组件）&& update（组件值保存到图表属性中）。
单元格配置界面xxxReportDataPane,继承抽象类AbstractExtendedChartReportDataPane。处理参考数据集数据配置界面，上栗子，不做累述。
第五步：
图表插件接口xxx，继承抽象类AbstractExtentChartProvider。
eg：
实现抽象方法：createChart （返回第三步的实例对象xxxChart，后台图表对象）。
图表界面插件接口xxxUI，继承AbstractExtendedChartUIProvider。
eg：实现接口方法：getTableDataSourcePane && getReportDataSourcePane （返回第四步定义的两个数据配置界面的实例对象）&&getIconPath(表单工具栏拖拽图表小图标)。
第六步：插件相关。
新建plugin.xml文件，内容拷贝下面内容，需要更改的字段有：
id:插件id。com.fr.plugin.demoChart 换成自己的，比如com.fr.plugin.xxxChart。
name:插件名称。DEMO图表 换成自己的。
function-recorder： 插件功能点记录。很重要！！！。class写第三步定义的类的路径即可。同时需要给第三步定义的类添加注解@FunctionRecorder，方法addJSON添加注解@ExecuteFunctionRecord
IndependentChartProvider：图表接口。class写第五步中的xxx路径。plotID为 第三步中图表对象实现的抽象方法getChartID返回的结果。
IndependentChartUIProvider：图表UI接口。class写第五步中的xxxUI路径。plotID为 第三步中图表对象实现的抽象方法getChartID返回的结果。
简单的开发到此结束，如果想要联动or超链or导出or公式等，请参考开发进阶