echarts引入百度地图并且添加点击事件
（1）下载依赖项
npm install echarts --save
（2）引入echarts到页面当中
import * as echarts from 'echarts'
引入后可以直接进行使用，这是引入了所有的echarts所属库的，按需引入比较麻烦，如果说可以想缩小打包后的上线文件，可以通过cdn引入。
（3）初始化echarts图表
const chart = echarts.init(document.getElementById('main'))echarts.registerMap('JS', res)chart.on('click', function (params) {// 控制台打印数据的名称console.log(params)})chart.setOption(this.option)
（4）要先为echarts图表指定一个显示容器，赋予宽高
<div ref="map" id="main" style="width: 800px; height: 800px"></div>
（5）示例页面
<template><div><button @click="changeMap">点击</button><div ref="map" id="main" style="width: 800px; height: 800px"></div></div></template><script>// import jiangsu from '../assets/mapJson/hebei.json' // 引入地图json数据import * as echarts from 'echarts'export default {name: 'app',data() {return {mapJson: 'https://geo./areas_v3/bound/130800_full.json',option: {geo: [{map: 'JS',zlevel: 5,label: {show: true,color: '#eee'},itemStyle: {color: '#0B57D3', // 背景borderWidth: '2', // 边框宽度borderColor: '#fff' // 边框颜色}},{map: 'JS',top: '11%',zlevel: 4,itemStyle: {color: '#0B57D3', // 背景borderWidth: '1', // 边框宽度borderColor: '#0B57D3' // 边框颜色}},{map: 'JS',top: '12%',zlevel: 3,itemStyle: {color: '#163F6C', // 背景borderWidth: '1', // 边框宽度borderColor: '#163F6C' // 边框颜色}},{map: 'JS',top: '13%',zlevel: 2,itemStyle: {color: '#31A0E6', // 背景borderWidth: '1', // 边框宽度borderColor: '#31A0E6', // 边框颜色shadowColor: '#fff', // 外部阴影shadowBlur: '10'}}]},mapVisible: true}},created() {this.getMapJson()},mounted() {},methods: {async getMapJson() {const { data: res } = await this.$api.get(this.mapJson)this.$nextTick(() => {const chart = echarts.init(document.getElementById('main'))echarts.registerMap('JS', res)// eslint-disable-next-line space-before-function-parenchart.on('click', function (params) {// 控制台打印数据的名称console.log(params)})chart.setOption(this.option)})},// 点击修改地图的地址changeMap() {// 在加载新的地图实例后，先销毁echarts实例mainecharts.dispose(document.getElementById('main'))this.mapJson = 'https://geo./areas_v3/bound/130000_full.json'// 重新加载新的地图实例this.getMapJson()}}}</script><style></style>
