vue使用echarts引入离线地图（geo.json）并切换省市（以四川为例）可下钻

首先安装echarts
npm install echarts --save
1
然后再main.js中引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts


在需要使用的vue组件中，就可以使用this.$echarts调用echarts的方法

接下来注册地图
//引入地图离线文件
import sichuan from './sichuan.json'
import yaan from './citys/511800.json'
import bazhong from './citys/511900.json'
import neijiang from './citys/511000.json'
import mianyang from './citys/510700.json'
...
//使用name映射地图json文件
const jsonMap = {
    '四川省': sichuan,
    '雅安市': yaan,
    '巴中市': bazhong,
    '内江市': neijiang,
    '绵阳市': mianyang,
    ...
}
//循环遍历注册地图
for (let index in this.jsonMap) {
    this.$echarts.registerMap(index, this.jsonMap[index])
}

在options中配置离线地图
//在series中指定离线地图
map---serires---mapType---'四川省'
//在需要切换地图的时候修改series--mapType
map---serires---mapType---'成都市'
//调用setOptions重绘地图
let myChart = this.$echarts.init(document.getElementById('mapChart'));
myChart.setOption(option);

点击下钻的实现
给echarts的实例对象添加click事件

myChart.on('click', function(result){
     const map = that.options
    const index = map.findIndex(item => item.area_name == result.name)
    that.province_code = map[index].area_code
})
————————————————
版权声明：本文为CSDN博主「李弈圣」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43374193/article/details/95594419