vue如何使用echarts做中国地图以及map地图和表格的联动

项目需求1: 使用中国地图展示数据,自定义tooltip

项目需求2: 地图和表格联动 点击或者悬浮表格某一行 自动选中地图的某个地区并显示自定义的tooltip

其中需求1 当时傻乎乎的还去下载了china.js 其实不管china.js/chain.json 或者 world.js/world.json 都可以在node_modules中的echarts里面找到

// 只需要这样引入即可
improt 'echarts/map/js/china'

注意: 正常情况下,如果你不引入echarts.js是会报错的 “Echarts is not Loaded”
注意引入顺序 首先是引入echarts 然后才引入china
我的项目中是在main.js文件已经引入echarts了并且在Vue的原型上添加了
所以涉及到地图的页面 只需要引入china 即可
需求1基本解决了

需求2开发
需求是 点击右侧表格 然后地图上展示对应地区或者城市的 tooltip;如图

// 此处可以看代码
// 首先是在mounted里面获取了地图元素
mounted() {
this.comMap = this.$echarts.init(document.getElementById(this.chartData[0].id))
}
// 然后再表格单击方法里面 调用echarts的api
   rowClick(row) {
      var index = this.mapTableData.indexOf(row)
      this.comMap.dispatchAction({
        type:'showTip',
        seriesIndex: 0,
        dataIndex:index
      });
    }

主要是调用了echarts的api 详情看官网 API => action => tooltip