vue3+ts+echarts 在项目中引入宁波市地图

vue3+ts+echarts 在项目中引入宁波市地图

一、在.vue文件的template中给地图文件开辟一个空间

<div class="mapChart" ref="mapChartRef"></div>

.mapChart {
    // width height
    @include wihe(722px, 945px);
}

二、声明一个变量来存储echarts实例，并使用ref引用地图的Dom元素

let mapChart: ECharts;
const mapChartRef:any = ref(null);

三、在onMounted生命周期中初始化 ECharts 实例，并将其绑定到一个特定的 DOM 元素上

onMounted(() => {
    mapChart = init(mapChartRef.value as HTMLElement);
})
onBeforeUnmount(() => {
    mapChart.dispose();
})

四、获取宁波市地图的.json

1. 将宁波市地图的.json文件放在前端项目的public目录下

2. 使用本地文件请求的方式请求到宁波市的.json文件

let geoJson: any = {};
/**
 * 获取宁波市地图的.json文件
 */
const getMapData = async () => {
    const res = await request.get("./json/3302.json");
    geoJson = res;
}

五、定义initMapChart方法初始化和配置一个地图图表

const initMapChart = () => {
    let zoom = 1.2;
    let center = [121.58, 29.720853803022685];
    var name = "宁波市";
    registerMap(name, geoJson);
    var option = {
        geo: {
            silent: false,
            type: "map",
            map: name,
            zoom: zoom,
            aspectScale: 1,
            center: center,
            label: {
                show: false,
            },
            select: {
                show: false,
            },
            emphasis: {
                show: false,
            },
        },
    }
    mapChart.setOption(option);
}

onMounted(() => {
    mapChart = init(mapChartRef.value as HTMLElement);
    getMapData().then(() => {
        initMapChart();
    })
})

此时，就可以得到一个最初级版的宁波市地图