npm i echarts 安装echarts 插件
在mian.js中导入echarts插件并挂载
import { createApp } from "vue";
import App from "./App.vue";
import * as echarts from "echarts";
import china from "../public/china.json"; // 导入省份数据
const app = createApp(App); // 实例化app
echarts.registerMap("china", china); // 实例化地图
app.config.globalProperties.$echarts = echarts; // 在全局挂载echarts
app.use(store).use(router).use(vueSeamless).mount("#app");
使用echarts进行配置地图
<template>
<div id="myChart" :style="{ height: '900px', width: '1500px' }"></div>
</template>
<script>
export default {
name: "maps",
data() {
return {
option: {
// 鼠标悬浮显示省份名称
tooltip: {
formatter: function (params) {
return params.name;
},
},
visualMap: {
min: 0,
max: 1500,
left: "left",
top: "bottom",
text: ["高", "低"],
inRange: {
color: ["#72ACFF", "#4180D9"],
},
show: false,
},
geo: {
map: "china",
roam: false,
zoom: 1.1,
label: {
normal: {
show: true,
fontSize: "10",
color: "#333", // 字体颜色
},
emphasis: {
// 动态展示的样式
color: "#010D39",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.6)", // 边框颜色
color: "#C3D08B", // 地图背景色
},
emphasis: {
color: "#010D39",
areaColor: "#5E97FF",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 1,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
series: [
{
name: "数量占比",
type: "map",
geoIndex: 0,
},
],
},
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
let charts = this.$echarts.init(document.querySelector(`#myChart`));
let mapName = "china";
let geoCoordMap = {};
let mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (v) {
// 地区名称
let name = v.properties.name;
// 地区经纬度
geoCoordMap[name] = v.properties.cp;
});
charts.setOption(this.option);
},
},
};
</script>
切记设置盒子的宽和高。如果要调整地图大小,首先设置盒子的宽高,在设置geo中zoom属性根据开发要求进行设置比例。
因为省份数据量太大,下一期单独出一个省份数据的json文件