VUE+Echart+Geojson实现全国地图map数据展示

目录

效果

Geojson

Echart

VUE

---

效果

Geojson

首先去这个网站下载需要展示的map，（全国/省/市），（点击省能进入市）

https://datav.aliyun.com/portal/school/atlas/area_selector

下载右侧的json文件

Echart

我用的是这种效果的地图 https://echarts.apache.org/examples/zh/editor.html?c=map-HK

VUE

将下载好后的json文件扔进项目

以下内容直接粘贴全部代码

<template>
  <div class="echart" id="chart1" ref="chart1" :style="{width: '100%', height: '1230px', background_color: '#fff'}"></div>
</template>

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

export default {
  name: 'AreaEchart',
  data() {
    return {
      option: {
        title: {
          text: '中华人民共和国地图' // 标题
        },
        visualMap: { // 左下角选峰值的小插件
          min: 800,
          max: 50000,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        tooltip: { // 鼠标放在省块上展示数据
          trigger: 'item',
          formatter: '{b}<br/>{c} (数)'
        },
        series: [ // 地图参数
          {
            name: 'zg', // 对应json文件名
            type: 'map',
            map: 'zg', // 对应json文件名
            label: {
              show: true
            },
            data: [
              { name: '青海省', value: 20057.34 },
              { name: '辽宁省', value: 15477.48 },
              { name: '黑龙江省', value: 31686.1 },
              { name: '吉林省', value: 6992.6 },
              { name: '河北省', value: 44045.49 },
              { name: '河南省', value: 40689.64 },
              { name: '山东省', value: 37659.78 },
              { name: '陕西省', value: 45180.97 },
              { name: '山西省', value: 55204.26 },
              { name: '江苏省', value: 21900.9 },
              { name: '浙江省', value: 4918.26 },
              { name: '福建省', value: 5881.84 },
              { name: '广东省', value: 4178.01 },
              { name: '海南省', value: 2227.92 },
              { name: '云南省', value: 2180.98 },
              { name: '江西省', value: 9172.94 },
              { name: '湖南省', value: 3368 },
              { name: '湖北省', value: 806.98 }
            ]
            // 自定义名称映射
            // nameMap: {
            //   'Central and Western': '中西区',
            //   'Eastern': '东区',
            //   'Islands': '离岛',
            //   'Kowloon City': '九龙城',
            //   'Kwai Tsing': '葵青',
            //   'Kwun Tong': '观塘',
            //   'North': '北区',
            //   'Sai Kung': '西贡',
            //   'Sha Tin': '沙田',
            //   'Sham Shui Po': '深水埗',
            //   'Southern': '南区',
            //   'Tai Po': '大埔',
            //   'Tsuen Wan': '荃湾',
            //   'Tuen Mun': '屯门',
            //   'Wan Chai': '湾仔',
            //   'Wong Tai Sin': '黄大仙',
            //   'Yau Tsim Mong': '油尖旺',
            //   'Yuen Long': '元朗'
            // }
          }
        ]
      }
    }
  },
  methods: {

    getData(value) {
      this.initChart()
    },

    initChart() {
      echarts.registerMap('zg', jsonData)
      const getchart = echarts.init(this.$refs.chart1)
      getchart.setOption(this.option)
      window.onresize = () => {
        getchart.resize()
      }
    }
  }
}
</script>