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

最新推荐文章于 2024-02-27 17:10:54 发布

大头猴子

最新推荐文章于 2024-02-27 17:10:54 发布

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/meikaied/article/details/98058764

本文介绍了在Vue项目中如何使用ECharts实现中国地图的展示，并且详细讲述了如何实现地图与表格的联动功能，包括点击或悬浮表格行时自动选中地图区域并显示自定义tooltip。在实现过程中，强调了正确引入ECharts和China地图文件的重要性，以及利用ECharts的API进行tooltip操作来完成需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求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

目前两个需求开发完成