一、效果
二、代码
<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
