echarts v4.1.0

实现思路：

1.将地图json文件存在本地（建议接口返回，或者用高德地图api，因为文件有点大）
2.echatrs地图点击事件，获取点击地区名，加载该地区名地图json数据（这里记得要在每次点击事件触发前先取消点击事件，不然会重复触发）
3.返回操作这里只是下钻到市，返回时可以直接展示个广东地图数据。不过这里考虑到后面会有下钻区的操作，所以将具体逻辑也实现了

<template>
    <div class="container">
        <div id="myChart" :style="{width: '892px', height: '600px'}"></div>
        <a v-show="parentInfo.length > 1" href="javascript:;" @click="goBack">返回</a>
    </div>
</template>

<script>
    let geoJson = require('/public/map/guangdong.json')
    export default {
        name: "GuangdongMap",
        data() {
            return {
                myChart: null,
                chartData: [],
                geoJson,
                noDrillCity: ['中山市', '东莞市'],   //非下钻名单

                parentInfo: [{
                    cityName: "广东省",
                    code: 440000
                }],
            }
        },
        mounted() {
            this.drawMap('广东省', this.geoJson['广东省']);
        },
        methods: {
            drawMap(map, data, mapData) {
                //防止重复注册
                if (!this.$echarts.getMap(map)) this.$echarts.registerMap(map, data);

                this.myChart = this.$echarts.init(document.getElementById('myChart'))
                this.myChart.showLoading();

                //todo 模拟数据，具体实现可以拿到数据后将name和code一起存入数据，方便点击时候
                mapData = data.features.map((item) => {
                    return {
                        value: (Math.random() * 1000).toFixed(2),
                        name: item.properties.name,
                        code: item.properties.adcode,
                    }
                });
                let option = {
                    series: [{
                        name: '广东省',
                        type: 'map',
                        map, // 自定义扩展图表类型
                        aspectScale: 1,
                        zoom: 0.65, //缩放
                        showLegendSymbol: false,
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 10
                        },
                        itemStyle: {
                            areaColor: '#0E95F1',
                            borderColor: '#e9e9e9',
                            borderWidth: 1,
                            shadowColor: '#0E95F1',
                            shadowBlur: 20,
                        },
                        emphasis: {
                            label: {
                                show: true,
                                color: '#fff',
                                fontSize: 10
                            },
                            itemStyle: {
                                areaColor: '#FFD181',
                                borderColor: '#fff',
                                borderWidth: 1
                            }
                        },
                        layoutCenter: ['50%', '50%'],
                        layoutSize: '160%',
                        markPoint: {
                            symbol: 'none'
                        },
                        data: mapData
                    }],
                    tooltip: {
                        trigger: 'item'
                    },
                }
                this.myChart.hideLoading();
                this.$nextTick(() => {
                    this.myChart.setOption(option);
                })

                //取消监听，不然会重复触发点击事件
                this.myChart.off("click");
                //监听点击事件
                this.myChart.on('click', (param) => {
                    if (this.geoJson[param.name]) {
                        //将下钻数据保存
                        this.parentInfo.push({
                            cityName: param.name,
                            code: param.data.code
                        })

                        if (this.noDrillCity.includes(param.name)) return;
                        this.drawMap(param.name, this.geoJson[param.name], []);
                    }
                });
            },
            goBack() {
                this.parentInfo.pop()
                let target = this.parentInfo[this.parentInfo.length - 1]
                this.$nextTick(() => {
                    this.drawMap(target.cityName, this.geoJson[target.cityName], [])
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .container {
        position: relative;

        a {
            position: absolute;
            right: 20%;
            top: 10%;
        }
    }
</style>

效果图

广东.png

广州.png