vue + echars 地图缩放切换数据与动态formatter数据展示

项目中最近碰到了一个复杂的效果，说是复杂其实难度主要在于我对echars的不熟悉导致的。算是摸着石头过河，分享一下解决经验。

1. 效果图
   
2. 分析
   1.地图缩放，echars的数据要修改
   查询文档发现可以通过监听echart的‘bmaproam’事件，能知道用户执行了缩放与拖拽，没有查询到缩放相关的事件，所以只能曲线救国了，监听到缩放之后通过chart示例，获取到当前缩放等级，然后在与变量中存储的上一次缩放等级做对比，不相同的话就执行缩放事件：

		this.chart.on('bmaproam', function(a, b, c) {
		 const bMap = _self.chart
		    .getModel()
		    .getComponent('bmap')
		    .getBMap()
		  const zoom = bMap.getZoom()
		  const center = bMap.getCenter()
		  if (zoom != _self.zoom) {
		    _self.zoom = zoom
		    _self.center = [center.lng, center.lat]
		    _self.$emit('bmaproam', zoom)
		  }
		})
		//父元素
		mapZoom(zoom) {
		//切换echars数据
	      if (zoom < 9) {
	        this.resizeLevel = 'city'
	      } else if (zoom < 12) {
	        this.resizeLevel = 'block'
	      } else {
	        this.resizeLevel = 'building'
	      }
	    }

注意，我并没有修改echars的默认地图，所以是百度地图，如果有修改默认地图，可能bmaproam事件就会失效。
2.动态的formatter展示
在鼠标放到对应的城市上方，回去调用接口，从后台获取当前城市的信息展示出来，这块困扰了半天，不知道怎么才能异步返回，甚至连Promise也用了一遍，最后还是在文档中发现了线索：formatter函数是有三个参数的，原谅我一直使用第一个参数。。。。异步获取数据之后，只要调用callback之后就可以了：

formatter(params, ticket, callback) {
      homeAreaInfo({
        column: params['data']['type'] + '_id',
        id: params['data']['id']
      }).then(res => {
        const _html = `
        这是一条测试语句${params['name']}
        `
        callback(ticket, _html)
      })
      return 'loading'
    },

4. 代码还没有整理，先记录下解决问题的思路。忙完这两天整理下代码再把源代码贴出来。