vue2+ echarts地图

1.效果图

2.echarts版本以及安装（最新版本也可以）

"echarts": "^5.3.3",

echarts官网地址echarts 

npm install echarts --save

页面引入echarts 

import * as echarts from 'echarts';

准备好dom容器并定义容器的大小

``````
// dom容器 
<div id="container"></div>
``````
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('container'));

``````
<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 900px;
  height: 600px;
  background: rgba(255, 255, 255, 0) !important; // 地图背景透明
}
</style>

3.完整代码（可以直接复制使用以组件的形式引入页面） 

<template>
  <div>
    <div id="container2"></div>
    <div v-show="readonly" class="dia-log" :style="{top: dialogY + 'px', left: dialogX  + 'px'}">
      <div class="dia-contain">
        <div class="dia-footer">
          <el-button @click="handdleClose" size="small">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import geoJson from './hefei'
export default {
  data () {
    return {
      chart: null,
      readonly: false,
      dialogX: 0,
      dialogY: 0
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const that = this
      const mycharts = document.getElementById('container2')
      this.chart = echarts.init(mycharts)
      const option = {
        title: {
          text: 'USA Population Estimates (2012)',
          subtext: 'Data from www.census.gov',
          sublink: 'http://www.census.gov/popest/data/datasets.html',
          left: 'right'
        },
        tooltip: {
          trigger: 'item',
          // triggerOn: 'click', // 是否是点击事件触发，默认为hover，点击事件可以添加到下面
          showDelay: 0,
          transitionDuration: 0.2
        },
        visualMap: {
          left: 'right',
          min: 500000,
          max: 38000000,
          inRange: {
            color: [
              '#313695',
              '#4575b4',
              '#74add1',
              '#abd9e9',
              '#e0f3f8',
              '#ffffbf',
              '#fee090',
              '#fdae61',
              '#f46d43',
              '#d73027',
              '#a50026'
            ]
          },
          text: ['High', 'Low'],
          calculable: true
        },
        // toolbox: { // 刷新下载的工具类
        //   show: true,
        //   orient: 'vertical',
        //   left: 'left',
        //   top: 'top',
        //   feature: {
        //     dataView: { readOnly: false },
        //     restore: {},
        //     saveAsImage: {}
        //   }
        // },
        series: [
          {
            name: '合肥市',
            type: 'map',
            roam: true,
            mapType: 'hefei',
            zoom: 1.2,
            // x: '30%',
            selectedMode: 'single', // multiple多选
            label: {
              normal: {
                color: 'rgba(0,0,0,0.8)',
                formatter: '{b}',
                position: [-12, -1],
                show: true
              }
            },
            // map: 'USA',
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { name: '庐阳区', value: 4822023 },
              { name: '瑶海区', value: 731449 },
              { name: '蜀山区', value: 6553255 },
              { name: '高新区', value: 2949131 },
              { name: '包河区', value: 38041430 },
              { name: '政务区', value: 5187582 },
              { name: '肥东县', value: 3590347 },
              { name: '肥西县', value: 917092 },
              { name: '巢湖市', value: 632323 },
              { name: '庐江县', value: 19317568 },
              { name: '长丰县', value: 49317568 }
            ]
          }
        ]
      }
      echarts.registerMap('hefei', geoJson) // 绘制中国地图
      this.chart.setOption(option)
      this.chart.on('click', (params) => {
        this.readonly = true
        console.log(params)
        // 获取鼠标相对左上角位置
        const event = window.event
        const x = event.clientX
        const y = event.clientY - 100
        console.log(x, y)
        this.dialogX = x
        this.dialogY = y
        // 逻辑控制
      })
    },
    handdleClose () {
      this.readonly = false
    }
  }

}
</script>

<style lang="scss" scoped>
#container2 {
  padding: 0px;
  margin: 0px;
  width: 900px;
  height: 600px;
  // background: rgba(255, 255, 255, 0) !important; // 地图背景透明
}
.dia-contain{
  height: 100px;
  width: 200px;
  background: gainsboro;
  border: 1px solid gray;
  border-radius: 4px;
}
.dia-log{
  position: fixed;
  z-index: 99999;
}
.dia-footer{
  position: absolute;
  bottom: 8px;
  right: 10px;
  text-align: center;
}
</style>

4.geoJson获取地址，获取到需要的数据后引入到页面