Vue+Echarts 实现青岛自定义样式地图

一、效果

二、代码

<template>
    <div class="chart-box">
        <chart ref="chartQingdao" style="width: 100%; height: 100%;" :options="options" autoresize></chart>
    </div>
</template>
<script>
import Chart from "vue-echarts"
import { qingdao_bg, marker } from '../images/index.js'

export default {
    components: {
        chart: Chart
    },
    data () {
        return {
            timer: null,
            index: -1,
            regionList: [
                {
                    value: '370202',
                    name: '市南区'
                },
                {
                    value: '370203',
                    name: '市北区'
                },
                {
                    value: '370211',
                    name: '黄岛区'
                },
                {
                    value: '370212',
                    name: '崂山区'
                },
                {
                    value: '370213',
                    name: '李沧区'
                },
                {
                    value: '370214',
                    name: '城阳区'
                },
                {
                    value: '370215',
                    name: '即墨区'
                },
                {
                    value: '370281',
                    name: '胶州市'
                },
                {
                    value: '370283',
                    name: '平度市'
                },
                {
                    value: '370285',
                    name: '莱西市'
                }
            ],
            options: {}
        }
    },
    computed: {
        mapJson() {
            return require(`./370200.json`);
        },
        maxIndex () {
            return this.regionList.length-1;
        }
    },
    watch: {
        index (val) {
            if(val>-1) {
                this.$refs.chartQingdao.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: this.index
                });
            }
        }
    },
    methods: {
        async draw () {
            let image = document.createElement('img'), symbol = document.createElement('img');
            image.src = qingdao_bg; //主体地图星空一样的背景（若背景未覆盖主体地图全部，一、调整背景图片大小；二、调整主体地图的aspectScale、layoutSize值）
            symbol.src = marker; //每个地图区域的icon
            Chart.registerMap('qingdao', this.mapJson);
            this.options = {
                tooltip: { //鼠标移至地图区域，区域详情的展示设置
                    axisPointer: {
                        type: 'none'
                    },
                    padding: 0,
                    position: (point) => {
                        return [point[0], point[1]];
                    },
                    backgroundColor: 'rgba(50, 50, 50, 0)',
                    className: 'custom-tooltip-box',
                    formatter: (params) => {
                        return '<div class="custom-tooltip-box">'
                                    + params.name
                                +'</div>';
                    }
                },
                geo: [
                    { //最上层我们看到的地图主体
                        map: "qingdao",
                        aspectScale: 0.75, 
                        layoutSize: '80%',
                        layoutCenter: ['52%', '50%'],
                        zoom: 1,
                        roam: false
                    },
                    { //主体地图的粗边框（实际我觉得并没有效果）
                        map: "qingdao",
                        aspectScale: 0.75, 
                        layoutSize: '80%',
                        layoutCenter: ['52%', '50%'],
                        zoom: 1,
                        roam: false,
                        silent: true,
                        itemStyle: {
                            borderColor: '#63E9F2',
                            borderWidth: 5
                        }
                    },
                    { //主体地图后的地图影子
                        map: "qingdao",
                        aspectScale: 0.75, 
                        layoutSize: '84%',
                        layoutCenter: ['52%', '51%'],
                        zoom: 1,
                        roam: false,
                        silent: true,
                        itemStyle: {
                            areaColor: '#012D57',
                            borderColor: '#areaColor',
                            borderWidth: 1
                        },
                        emphasis: {
                            itemStyle: {
                                areaColor: '#012D57',
                                borderColor: '#areaColor',
                                borderWidth: 1
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: 'map',
                        mapType: 'qingdao',
                        aspectScale: 0.75,
                        layoutSize: '80%',
                        layoutCenter: ['52%', '50%'],
                        zoom: 1,
                        roam: false, 
                        label: {
                            normal: {
                                show: true,
                                formatter: (params) => {
                                    return `{marker| }\n\n{name| ${params.name}}`;
                                },
                                rich: {
                                    marker: {
                                        width: 24,
                                        height: 30,
                                        backgroundColor: {
                                            image: symbol
                                        }
                                    },
                                    name: {
                                        fontFamily: 'PingFangSC',
                                        fontSize: 18,
                                        fontWeight: 600,
                                        color: '#C6DFFF'
                                    }
                                }
                            },
                            emphasis: {
                                color: 'rgba(0, 0, 0, 0)'
                            }
                        },
                        itemStyle: {
                            areaColor: {
                                image: image,
                                repeat: 'no-repeat'
                            },
                            borderColor: '#63E9F2',
                            borderWidth: 1,
                            shadowBlur: 29,
                            shadowColor: 'rgba(73, 150, 255, 0.5)'
                        },
                        emphasis: {
                            itemStyle: {
                                areaColor: {
                                    image: image,
                                    repeat: 'no-repeat'
                                }
                            }
                        },
                        data: this.regionList
                    }
                ]
            };
            this.$nextTick(() => {
                this.switchRegion();
                this.setTimer();
                this.$refs.chartQingdao.chart.on('mouseover', (params) => {
                    this.$emit('switch-region', {
                        active: String(params.value),
                        header: `${params.name}参保征缴情况`
                    });
                    this.clearTimer();
                });
                this.$refs.chartQingdao.chart.on('mouseout', () => {
                    this.setTimer();
                });
            });
        },
        switchRegion () {
            this.index===this.maxIndex?this.index=0:this.index++;
            this.$emit('switch-region', {
                active: this.regionList[this.index].value,
                header: `${this.regionList[this.index].name}参保征缴情况`
            });
        },
        setTimer () { //轮播地图区域，展示区域详情的定时器
            let _this = this;
            this.timer = setInterval(() => {
                _this.switchRegion();
            }, 5000);
        },
        clearTimer () {
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    mounted () {
        this.draw();
    },
    destroyed() {
        this.clearTimer();
    }
}
</script>
<style scoped lang="less">
.chart-box{
    width: 100%;
    height: 630px;
}
/deep/ .custom-tooltip-box {
    width: 316px;
    height: 123px;
    padding-left: 110px;
    background-image: url('../images/tooltip_bg.png');
    font-family: 'PingFangSC';
    font-size: 20px;
    font-weight: 600;
    line-height: 148px;
    text-align: center;
    color: #B5F1FF;
}
</style>

三、代码引用资源下载地址

https://download.csdn.net/download/hrcsdn13/90325739