Echarts中国和省份地图(个人笔记)

<template>
<div>
    <div id="myChart" style="width: 100vw;height:100vh;"></div>
</div>
</template>

<script>
// 现在下载Echarts好像没有json文件了，需要自己去下载
import chinaJson from 'echarts/map/json/china.json'
export default {
    data() {
        return {
            myChart: '',
            province: '',
            province: {
                "北京": "beijing",
                "天津": "tianjin",
                "上海": "shanghai",
                "重庆": "chongqing",
                "河北": "hebei",
                "河南": "henan",
                "云南": "yunnan",
                "辽宁": "liaoning",
                "黑龙江": "heilongjiang",
                "湖南": "hunan",
                "安徽": "anhui",
                "山东": "shandong",
                "新疆": "xinjiang",
                "江苏": "jiangsu",
                "浙江": "zhejiang",
                "江西": "jiangxi",
                "湖北": "hubei",
                "广西": "guangxi",
                "甘肃": "gansu",
                "山西": "shanxi",
                "内蒙古": "neimenggu",
                "陕西": "shanxi1",
                "吉林": "jilin",
                "福建": "fujian",
                "贵州": "guizhou",
                "广东": "guangdong",
                "青海": "qinghai",
                "西藏": "xizang",
                "四川": "sichuang",
                "宁夏": "ningxia",
                "海南": "hainan",
                "台湾": "taiwan",
                "香港": "xianggang",
                "澳门": "aomen"
            },
            
        }
    },
    created() {
        
    },
    mounted() {
        this.initMap('china', chinaJson)
        this.myChart.on('click', (e) => {
            this.handleGetProvince(e)
        })
    },
    methods: {
         // 初始化地图
        initMap(name, json) {
            this.myChart = this.$echarts.init(document.getElementById('myChart'))
            this.$echarts.registerMap(name, json)
            var option = { // 配置option.geo才能显示地图
                geo: {
                    map: name,
                    itemStyle: {
                        areaColor: 'skyblue',
                        color: '#fff',
                        borderColor: '#fff',
                    },
                    selectedMode: 'single',
                    label: {
                        show: true, // 显示省份名称
                        position: 'left',
                    },
                    emphasis: {
                        label: {
                            color: '#fff'
                        },
                        itemStyle: {
                            color: '#1e90ff'
                        }
                    },
                    roam: true, // 滚轮缩放
                    scaleLimit: {  // 缩放大小限制
                        min: 1,
                        max: 3
                    }
                },
                tooltip: {
                    triggerOn: "mousemove",
                    formatter: function (e) {
                        return e.name
                    }
                },
                series: [{  // 配置series后tooltip才能生效
                    name: "省份",
                    type: "map",
                    geoIndex: 0,
                    data: []
                }],
            }
            this.myChart.resize()
            // 使用刚指定的配置项和数据显示图表。
            this.myChart.setOption(option);
        },
    },
}
</script>

点击切换省份地图

 // 点击地图生成省份地图——根据name匹配相应省份json文件
handleGetProvince(val) {
     chinaJson.features.forEach(i => {
          if (i.properties.name === val.name) {
             let json = require('echarts/map/json/province/'+this.province[val.name]+'.json')
             this.myChart.clear()
             this.initMap(this.province[val.name], json)
          }
     })
}

阿里云json下载地址