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

忘是亡心i 2021-11-09 16:31 797阅读 0赞

项目需求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;如图  
![地图和表格][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laWthaWVk_size_16_color_FFFFFF_t_70]

// 此处可以看代码
    // 首先是在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 详情看[官网][Link 1] API => action => tooltip

目前两个需求开发完成

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21laWthaWVk_size_16_color_FFFFFF_t_70]: /images/20211109/f1fb67608b06403d978a5a031e1f9515.png
[Link 1]: https://www.echartsjs.com/zh/api.html#echarts