先上代码:
<template>
<div>
<div id="map" class="w-100 h-100"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import China from "@/assets/json/China.json";
echarts.registerMap("china", China);
export default {
name: "ChinaMap",
data () {
return {};
},
mounted () {
this.initMap("map");
},
methods: {
initMap (id) {
let myChart = echarts.init(document.getElementById(id));
const option = {
geo: {
map: "china",
aspectScale: 1, // 长宽比
zoom: 1.4,
top: "20%",
itemStyle: {
areaColor: "#42aefe",
borderColor: "transparent",
borderWidth: 1,
},
tooltip: {
show: false,
},
},
series: [
{
map: "china", // 使用
type: "map",
aspectScale: 1, // 长宽比
zoom: 1.4,
top: "18%",
label: {
show: true,
textStyle: {
color: "#fff",
fontFamily: "SimHei",
fontSize: 16,
},
},
itemStyle: {
borderColor: "#fff",
borderWidth: 1,
areaColor: "#42aefe",
}
},
],
};
option && myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
},
},
};
</script>
<style lang="scss" scoped></style>
博主踩的坑:
以下三个地方的China大小写区分,China大写则是正常展示全部地图,china小写则是以右下角图例的形式。(修改完后图例可能很乱,重启项目即可)
echarts.registerMap("china", China);
geo: { map: "china",}
series: [{ map: "china"}]
实现位置:(参考版本: "echarts": "^5.4.2")
node_modules\echarts\lib\coord\geo\fix\nanhai.js
echarts对mapType:“china”做了特殊处理,找了很多China.json都没有找到南海诸岛的点位实际上在是在node_modules里面做的处理