100 lines
1.8 KiB
Vue
100 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import { centerMap } from "@/api";
|
|
// import 'echarts/map/js/china';
|
|
|
|
const chartRef = ref<HTMLElement | null>(null);
|
|
let chart: echarts.ECharts | null = null;
|
|
|
|
// 地图数据
|
|
const mapData = ref({
|
|
dataList: [] as {name: string, value: number}[],
|
|
regionCode: 'china'
|
|
});
|
|
|
|
// 获取地图数据
|
|
const getMapData = () => {
|
|
centerMap({regionCode: 'china'}).then(res => {
|
|
if (res.success) {
|
|
mapData.value = res.data;
|
|
initChart();
|
|
}
|
|
});
|
|
};
|
|
|
|
const initChart = () => {
|
|
if (!chartRef.value) return;
|
|
|
|
chart = echarts.init(chartRef.value);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c}'
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: 1000,
|
|
left: 'left',
|
|
top: 'bottom',
|
|
text: ['高', '低'],
|
|
calculable: true,
|
|
inRange: {
|
|
color: ['#e0f3f8', '#4575b4']
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '用户分布',
|
|
type: 'map',
|
|
map: 'china',
|
|
roam: false,
|
|
label: {
|
|
show: false
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true
|
|
}
|
|
},
|
|
data: mapData.value.dataList
|
|
}
|
|
]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
};
|
|
|
|
// 监听窗口大小变化，重绘图表
|
|
const handleResize = () => {
|
|
if (chart) {
|
|
chart.resize();
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
getMapData();
|
|
window.addEventListener('resize', handleResize);
|
|
});
|
|
|
|
// 组件卸载时移除事件监听
|
|
const onUnmounted = () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
if (chart) {
|
|
chart.dispose();
|
|
chart = null;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="map-container" ref="chartRef"></div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.map-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style> |