需求：渲染中國地圖，支持下鉆，同時南沙群島顯示在地圖右下腳

geoJson 數(shù)據(jù)可從 阿里云-dataV-下載
如果要展示 南海諸島需要將地圖類型設置為china, 將海南省中的三沙市坐標刪除

<template> <div ref="echartInstance"></div> </template> <script> import * as echarts from 'echarts' import { registerMap } from 'echarts' import geoJson from './geoJson.json'const CITY_LEVEL = {country: 'country', // 全國province: 'province',city: 'city', // 市district: 'district' // 縣一級 }export default {name: 'chinaMap',data() {return {curLevel: {level: CITY_LEVEL.country, // 默認國家adcode: '100000'},levelStack: [] // 下鉆的棧}},methods: {init(){// 此處將南沙群島的邊界過濾掉，或者也可以直接在geoJson中刪除geoJson.features = geoJson.features.filter(item => item.properties.adcode !== '100000_JD')const ecahrtInstance = echarts.init(this.$refs.echartInstance)// geoJson 文件可直接使用從阿里云下載文件registerMap(‘china’, geoJson)const option = {geo: {map: 'china'},series: [{type: 'map',map: 'china'}]}ecahrtInstance.setOption(option , true)ecahrtInstance.on('click', (params) => {// 可以從數(shù)據(jù)中拿到當前需要展示的省市區(qū)adcode 獲取對應的geoJson 文件const {level, adcode} = this.curLevelthis.levelStack.push({level, adcode})fetch(`/api/${params.adcode}.json`).then(res => {// 此處重新渲染echats 操作 })})} } } </script>

最終效果：

總結

以上是生活随笔為你收集整理的echarts 5.4版本 map 地图下钻，海南三沙市隐藏显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。