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; //每个地图区域的iconChart.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