<template>
<div class="world-map">
<div id="worldMap" ref="worldMap" class="map-wrap"></div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onActivated, watch } from 'vue';
import * as echarts from 'echarts';
import appData from '@/assets/continent_geo.json';
const props = defineProps({
mapData: {
type: Array,
default() {
return [];
},
},
});
// const a = props.mapData;
// console.log(a);
// const data = [
// {
// name: '中国',
// value: 100,
// },
// {
// name: '美国',
// value: 200,
// },
// ];
let myChart: echarts.ECharts | null = null;
let max = 0;
let min = 1000;
const initMap = () => {
echarts.registerMap('continent', appData);
myChart = echarts.init(document.getElementById('worldMap')!);
props.mapData.forEach((item) => {
if (item.value > max) {
max = item.value;
}
if (item.value < min) {
min = item.value;
}
});
myChart.setOption({
tooltip: {
trigger: 'item',
// eslint-disable-next-line consistent-return
formatter(params: any) {
if (params.data) {
const dom = `
<div> ${params.data.name} </div>
<div>渠道统计 ${Number(params.data.value).toFixed(2)} </div>
`;
return dom;
}
},
},
visualMap: {
type: 'continuous',
min,
max,
bottom: '0',
left: '0',
textStyle: { color: '#73747E' },
// pieces: props.pieces,
inRange: {
// 渐变颜色,从小到大
color: ['#EDF5FF', '#66A6FD'],
},
},
series: [
{
type: 'map',
mapType: 'continent', // 自定義擴展圖表類型
zoom: 1.1,
aspectScale: 1.1, // 长宽比
itemStyle: {
normal: { label: { show: false } },
emphasis: { label: { show: true } },
},
data: props.mapData,
},
],
});
};
initMap();
// onMounted(() => {
// initMap();
// });
onActivated(() => {
if (myChart) {
setTimeout(() => {
myChart.resize();
}, 200);
}
});
watch(
() => props.mapData,
() => {
initMap();
},
{ deep: true }
);
</script>
<style scoped>
.map-wrap {
width: 100%;
height: 400px;
}
</style>
配置文件也已上传csdn可供下载。