59 lines
1.6 KiB
Vue
59 lines
1.6 KiB
Vue
<template>
|
|
<div id="map" class="map-div"></div>
|
|
</template>
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import mapJson from '@/assets/json/fujian.json';
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
echarts.registerMap('js', mapJson)
|
|
getCharts();
|
|
})
|
|
})
|
|
|
|
const getCharts = () => {
|
|
var dom = document.getElementById("map");
|
|
if (dom) {
|
|
// 手动移除该属性
|
|
dom.removeAttribute('_echarts_instance_')
|
|
var myChart = echarts.init(dom);
|
|
var option = {
|
|
// backgroundColor: '#020933',
|
|
geo: [{
|
|
map: 'js',
|
|
roam: true, //是否允许缩放
|
|
zoom: 1.1, //默认显示级别
|
|
scaleLimit: {
|
|
min: 0.5,
|
|
max: 3
|
|
}, //缩放级别
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: '#254287',
|
|
borderColor: '#3fdaff',
|
|
borderWidth: 2,
|
|
shadowColor: 'rgba(63, 218, 255, 0.5)',
|
|
shadowBlur: 30
|
|
},
|
|
emphasis: {
|
|
areaColor: '#2B91B7',
|
|
}
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#ffffff',
|
|
emphasis: {
|
|
color: '#020933',
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: false
|
|
}
|
|
}],
|
|
series: []
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
}
|
|
}
|
|
</script> |