Echarts + layer 图表放大实现方案

需求描述：每个页面有多个echarts图表，应要求每个图表右上角增加一个按钮，点击后弹出一个窗口，窗口展示当前图表。

我们项目组四个开发人员，出现了三种实现方案，此处依次做简述（因公司保密要求，此处不展示任何代码与效果图）。

原页面（父页面）Echarts实现方式：

       1、数据加载方式：ajax。

       2、一个页面多个图表，一个页面一个js文件，一个页面一个css文件。

放大实现方案一：

        一个放大弹窗对应一个新页面，一个新页面一个js文件，js中ajax请求数据。

       优点：1、容易控制放大页面里的内容，对于单个特殊图表处理方便。

       缺点：1、有多少图表就要新建多少个js和html页面，还有controller，代码量极大；

                  2、不方便统一调整页面样式。

                  3、每次打开放大弹窗都要去数据库重新获取数，影响加载速度，还有可能数据与原图数据不一致（如果数据库此时又更新了）。

 放大实现方案二：

        此方式在方案一的基础上进行了改进：将请求数据的ajax代码，写到一个公共js文件中；只需要一个html页面，页面中隐藏域中绑定不同的参数，加载页面时js根据不同的参数调取不同的ajax方法获取数据。

       优点：1、每个模块对应的放大用的js、html、controller只需要保留一个，大大增加了代码的复用。

                  2、方便做统一样式调整。

       缺点：1、每次打开放大弹窗依然需要去数据库重新获取数，影响加载速度，还有可能数据与原图数据不一致（如果数据库此时又更新了）。

 放大实现方案三（个人推荐）：

      echarts中有最重要的两个对象：option对象、Dom对象（需要绑定数据的html元素）。

       放大弹窗（子页面）中图表与原图（父页面）的数据（也就是option中的数据）是一致的；不同的是option的部分配置项不同，需要初始化的Dom对象不同。

所以做法如下：   

       1、改进原页面的js代码：每个图表的option对象都以不同的名称声明为全局变量。

       2、声明放大弹窗中一些属性值，点击方法时改变option的部分属性值。

      3、建立option对象与当前所点击的按钮之间的映射关系。

      4、弹窗方法中获取放大弹窗（子页面）需要初始化的Dom元素，将option绑定即可。

以上4步js代码全部在原页面（父页面）完成！

       优点：1、所有模块对应的放大用的js、html、controller只需要保留一个，进一步增加了代码的复用。

                  2、每次打开放大弹窗不需要再次去数据库重新获取数，即时加载，无延迟；数据与原图完全一致。

                  3、对于共性的属性、统一样式的更改非常方便。

       缺点：部分图表页面有特殊需求，代码复杂度高，修改难度相对大一些。

 

 

公司的代码因保密要求不可以展示，稍后我会自己写个例子贴出相关实现代码。