vue+echarts+geojson实现贵阳市地图显示

成品效果图

第一步：下载geojson数据

到 阿里云数据可视化平台范围选择器 下载需要展示的map数据（全国/省/市[点击省能进入市]）

第二步：选择echarts图

使用 地理坐标/地图 里面的 香港18区人口密度 （2011） 地图为效果图

第三步：将下载的json文件扔进项目内，再复制以下代码并粘贴即可

贵阳市geojson数据(gy.json)：点击下载

<!-- echarts地图 -->
<template>
  <div class="box">
    <div class="echart_box" id="main"/>
  </div>
</template>

<script>
const echarts = require('echarts')
import jsonData from '../assets/gy.json' // 引入josn文件

export default {
  data() {
    return {
      areaList: [
        {name: '南明区', value: 0},
        {name: '云岩区', value: 10},
        {name: '花溪区', value: 0},
        {name: '乌当区', value: 40},
        {name: '白云区', value: 0},
        {name: '观山湖区', value: 60},
        {name: '开阳县', value: 0},
        {name: '息烽县', value: 80},
        {name: '修文县', value: 0},
        {name: '清镇市', value: 100}
      ]
    }
  },
  mounted() {
    this.initChart() // 初始化图表
  },
  methods: {
    /* 初始化图表 */
    initChart() {
      echarts.registerMap('gy', jsonData) // 生成矢量数据地图 第一个值(地图名称) 第二个值(geoJson格式的数据)
      const myChart = echarts.init(document.getElementById('main')) // 初始化图表
      const option = {
        visualMap: { // 左下角选峰值的小插件(视觉映射组件)
          show: false, // 是否显示视觉映射组件
          min: 0, // 最小值
          max: 100, // 最大值
          text: ['最大值', '最小值'], // 上下两端的文本内容
          textStyle: {
            color: '#fff' // 文字的颜色
          },
          realtime: false, // 拖拽时，是否实时更新
          calculable: true, // 是否显示拖拽用的手柄
          inRange: {
            // color: ['#00bbf2', '#f59557', '#f86505'] // 图元的颜色 - 注：使用颜色梯度时启用
          }
        },
        tooltip: { // 鼠标移入后展示数据
          show: true, // 是否显示提示框组件
          trigger: 'item', // item.数据项图形触发(主要在散点图) axis.坐标轴触发(主要在柱状图) none.什么都不触发
          triggerOn: 'mousemove', // 提示框触发的条件 mousemove.鼠标移动时触发 click.鼠标点击时触发 mousemove|click.同时鼠标移动和点击时触发 none.什么都不触发
          textStyle: {
            // fontSize: 20 // 提示框字体大小
          },
          // formatter: '{b}<br/>{c} 例', // 提示框浮层内容格式器
          formatter: function (params) {
            const val = params.data
            let text = val.name + "<br />" + val.value + "例"
            return text
          }
        },
        series: [ // 地图参数
          {
            type: 'map', // 地图类型
            map: 'gy', // 对应 registerMap 中的 mapName 名称
            roam: true, // 是否开启平滑缩放
            zoom: 1, // 当前视角内的缩放比例
            layoutCenter: ['50%', '50%'], // 地图中心在屏幕中的位置
            layoutSize: '100%', // 地图的大小(支持相对于屏幕宽高的百分比或者绝对的像素大小)
            label: { // 图形上的文本标签
              show: true, // 显示文本标签
              color: '#fff' // 字体颜色
            },
            itemStyle: {
              normal: { // 鼠标移入前的样式 - 注：使用颜色梯度时注释掉
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#3bb3ff', // 图形的描边颜色
                color: '#1083e2', // 地图区域的颜色(背景颜色)
                label: { // 图形上的文本标签
                  show: true, // 显示文本标签
                  color: '#fff' // 字体颜色
                }
              },
              emphasis: { // 鼠标移入后的样式
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#fff', // 图形的描边颜色
                areaColor: '#ed803b', // 地图区域的颜色(背景颜色) none.无样式
                label: { // 图形上的文本标签
                  show: true, // 显示文本标签
                  color: '#fff' // 字体颜色
                }
              }
            },
            select: { // 地图选中区域样式
              itemStyle: {
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#3bb3ff', // 图形的描边颜色
                areaColor: '#1083e2' // 地图区域的颜色(背景颜色)
              },
              label: { // 图形上的文本标签
                show: true, // 显示文本标签
                color: '#fff' // 字体颜色
              }
            },
            data: this.areaList // 数据内容数组
          }
        ]
      }
      myChart.setOption(option) // 设置配置项和数据并显示图表
      // 鼠标点击事件(加了getZr()后,在非数据区域和数据区域都能触发)
      /* myChart.getZr().on('click', e => {
         console.log(e)
       })*/
      /* myChart.on('click', e => {
         console.log(e)
         console.log(e.data.name + ':' + e.data.value)
       })*/
      // 窗口大小改变时触发
      window.onresize = () => {
        myChart.resize() // 重新定义图像尺寸
      }
    }
  }
}
</script>

<style scoped>
.box {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.echart_box {
  width: 50%;
  height: 800px;
}
</style>

<style>
body {
  margin: 0;
  padding: 0;
  background: #020325;
}
</style>