项目需求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
目前两个需求开发完成