feat(amap-echarts): 事件修改、完善插件

src/libs/core/amap-coordinate.js

@@ -5,10 +5,10 @@ export default class AMapCoordinate {
   }
   static create(ecModel) {
     const options = ecModel.getOption()
-    if (!options.getAMap) {
+    if (!options.getMap) {
       return
     }
-    const amapCoordinate = new AMapCoordinate(options.getAMap())
+    const amapCoordinate = new AMapCoordinate(options.getMap())
     ecModel.eachSeries(seriesModel => {
       if (seriesModel.get('coordinateSystem') === 'amap') {
         seriesModel.coordinateSystem = amapCoordinate

src/libs/core/amap-echarts.js

@@ -1,22 +1,23 @@
 import events from 'events'
 import echarts from 'echarts/lib/echarts'
-import AMapContainer from './amap-container'
+import _amapContainer from './amap-container'
 import EventNames from './amap-events'
-
-/**
- * 使用插件处理 echarts 参数
- * @param {object} options 参数
- */
-const process = options => {
-  AMapEcharts._plugins.forEach(plugin => (options = plugin(options)))
-  return options
-}
+import PluginBase, { PluginTypes } from '../plugins/base'
 
 export default class AMapEcharts extends events {
   static _configs = {}
-  static _plugins = []
-  static register(plugin) {
-    AMapEcharts._plugins.push(plugin)
+  static _plugins = {}
+  static registerPlugin(plugin) {
+    if (!(plugin instanceof PluginBase)) {
+      throw new Error(`plugin ${plugin.name} should inherit PluginBase`)
+    }
+    const type = plugin.getType()
+    const _plugins = AMapEcharts._plugins
+    if (_plugins[type]) {
+      _plugins[type].push(plugin)
+    } else {
+      _plugins[type] = [plugin]
+    }
   }
   static config(
     options = {
@@ -32,60 +33,82 @@ export default class AMapEcharts extends events {
     AMapEcharts._configs = options
   }
 
-  amapContainer = null
-  instance = null
-  options = null
-  disposed = false
+  _amapContainer = null
+  _instance = null
+  _options = null
+  _disposed = false
 
   constructor(map) {
     super()
-    this.amapContainer = new AMapContainer(map)
-    this.amapContainer.ready(() => {
+    this._amapContainer = new _amapContainer(map)
+    this._amapContainer.ready(() => {
       // 用户销毁的时候可能还没加载完，此处需要再次销毁
-      if (this.disposed) {
+      if (this._disposed) {
         this.dispose()
       }
-      this.amapContainer.setRender(this._update.bind(this))
       this._init()
     })
   }
 
   _init() {
-    const container = this.amapContainer.getContainer()
-    this.instance = echarts.init(
+    const container = this._amapContainer.getContainer()
+    this._instance = echarts.init(
       container,
       AMapEcharts._configs.theme,
       AMapEcharts._configs.opts
     )
-    this.on(EventNames.__REDENER__, this._update.bind(this))
-    this.emit(EventNames.INITED)
+    this._amapContainer.setRender(this._redener.bind(this))
+    // 内部重绘事件
+    this.on(EventNames.__REDENER__, this._redener.bind(this))
+    this.emit(EventNames.INIT)
+    this._execPlugin(PluginTypes.INIT)
   }
 
-  _update() {
-    this.instance.setOption(this.options)
-    this.emit(EventNames.UPDATE)
+  _redener() {
+    this._execPlugin(PluginTypes.REDENER)
+    this._instance.setOption(this._options)
+    this.emit(EventNames.REDENER)
+  }
+
+  _execPlugin(type) {
+    const plugins = AMapEcharts._plugins[type]
+    plugins && plugins.forEach(plugin => plugin.apply(this))
+  }
+
+  getMap() {
+    return this._amapContainer.getMap()
   }
 
-  setOption(options) {
-    this.options = {
-      ...process(options),
-      getAMap: () => this.amapContainer.getMap()
+  getOption() {
+    return this._options
+  }
+
+  setOption(_options) {
+    this._options = {
+      ..._options,
+      getMap: () => this._amapContainer.getMap()
     }
+    this._execPlugin(PluginTypes.UPDATE)
+    // 触发内部重绘事件
     this.emit(EventNames.__REDENER__)
+    this.emit(EventNames.UPDATE)
   }
 
   dispose() {
-    this.isDisposed = true
-    this.options = null
-    if (this.instance) {
-      this.instance.dispose()
-      this.amapContainer.dispose()
-      this.instance = null
-      this.amapContainer = null
+    this._disposed = true
+    this._options = null
+    if (this._instance) {
+      this._instance.dispose()
+      this._amapContainer.dispose()
+      this.off(EventNames.__REDENER__)
+      this._instance = null
+      this._amapContainer = null
     }
+    this.emit(EventNames.DESTROY)
+    this._execPlugin(PluginTypes.DESTROY)
   }
 
   isDisposed() {
-    return this.disposed
+    return this._disposed
   }
 }

src/libs/core/amap-events.js

@@ -2,9 +2,16 @@
  * 事件名称，带下划线的表示内部使用
  */
 const EventNames = {
+  // 内部重绘监听
   __REDENER__: '__reRedener__',
-  INITED: 'inited',
-  UPDATE: 'update'
+  // 高德地图插件加载完毕，第一次绘制完成
+  INIT: 'init',
+  // 地图移动、缩放、__REDENER__ 事件导致的重绘事件
+  REDENER: 'redener',
+  // 调用 setOption 方法
+  UPDATE: 'update',
+  // 调用 dispose 方法
+  DESTROY: 'destroy'
 }
 
 export default EventNames

src/libs/index.js

@@ -1,12 +1,12 @@
 import echarts from 'echarts/lib/echarts'
 import AMapEcharts from './core/amap-echarts'
 import AMapCoordinate from './core/amap-coordinate'
-import forBidAnimation from './plugins/forbid-animation'
+import ForbidAnimation from './plugins/forbid-animation'
 
 // 注册坐标系
 echarts.registerCoordinateSystem('amap', AMapCoordinate)
 
 // 注册插件
-AMapEcharts.register(forBidAnimation)
+AMapEcharts.registerPlugin(new ForbidAnimation())
 
 export default AMapEcharts

src/libs/plugins/base.js

@@ -0,0 +1,49 @@
+/**
+ * 插件基类
+ */
+import EventNames from '../core/amap-events'
+
+const toString = obj => {
+  const values = []
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      values.push(obj[key])
+    }
+  }
+  return values.join(', ')
+}
+
+// 为了让 `vscode` 有提示
+export const PluginTypes = Object.assign({}, EventNames)
+
+for (const key in PluginTypes) {
+  if (PluginTypes.hasOwnProperty(key) && key.indexOf('__') > -1) {
+    delete PluginTypes[key]
+  }
+}
+
+export default class PluginBase {
+  constructor() {
+    const type = this.getType()
+    if (type) {
+      if (!PluginTypes[type.toUpperCase()]) {
+        throw new Error(
+          `type property is '${type}', but expect one of [ ${toString(
+            PluginTypes
+          )} ]`
+        )
+      }
+    } else {
+      throw new Error('type property must not be empty')
+    }
+  }
+
+  getType() {
+    throw new Error('getType function is not implemented')
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  apply(instance) {
+    throw new Error('apply function is not implemented')
+  }
+}

src/libs/plugins/forbid-animation.js

@@ -1,16 +1,20 @@
+import PluginBase, { PluginTypes } from './base'
+
 /**
  * 禁止动画效果，防止地图移动缩放时 echarts 刷新不及时
- *
- * @param {object} options 参数
  */
-export default function forbidAnimation(options) {
-  const { series } = options
-  if (series) {
-    series.forEach(item => {
-      if (item.coordinateSystem === 'amap') {
-        item.animation = false
-      }
-    })
+export default class ForbidAnimation extends PluginBase {
+  getType() {
+    return PluginTypes.UPDATE
+  }
+  apply(instance) {
+    const { series } = instance.getOption()
+    if (series) {
+      series.forEach(item => {
+        if (item.coordinateSystem === 'amap') {
+          item.animation = false
+        }
+      })
+    }
   }
-  return options
 }