本文档介绍了如何在Vue3项目中利用ECharts创建一个三层散点地图，展示中国主要城市的降水量。首先通过npm初始化项目并安装所需依赖，然后导入地图JSON数据。接着在组件中定义DOM元素，处理数据并生成散点和地图数据。通过Echarts的`registerMap`方法注册地图，并设置图表配置。最后，地图具备点击事件，可以进行下钻展示更详细信息。
三层散点地图（Echarts+vue3）
效果
创建项目
npm init vite
cd vue-echarts-map
npm install
安装需要的依赖
npm install axios echarts element-plus less vue-router@next
修改文件结构，导入mapjson数据 点击下载
代码结构
EchartsMap.vue代码：
<!--
* @Author: lxiang
* @Date: 2022-02-07 17:48:56
* @LastEditors: lxiang
* @LastEditTime: 2022-02-08 09:46:16
* @description: 三层散点地图
* @FilePath: \vue-echarts-map\src\components\EchartsMap.vue
-->
<template>
<div ref="mapChart" class="map2"></div>
</template>
<script setup>
import cityMap from "../assets/json/map/china-main-city-map";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";
const mapChart = ref(); //引用Dom元素
const chinaId = 100000;
const chinaName = ref("china");
onMounted(() => {
getMapJson(); //初始化
});
// 测试数据
const test = [
{ name: "四川", balance: "654", badDebts: "789", rate: "23.5" },
{ name: "成都市", balance: "654", badDebts: "789", rate: "23.5" },
{ name: "武侯区", balance: "345", badDebts: "450", rate: "25.5" },
{ name: "双流县", balance: "300", badDebts: "339", rate: "10.0" },
{ name: "重庆", balance: "875", badDebts: "235", rate: "67.5" },
{ name: "北京", balance: "897", badDebts: "432", rate: "34.5" },
{ name: "新疆", balance: "897", badDebts: "432", rate: "76" },
];
//生成散点数据 [{name:"四川"，value：[经度,纬度]},{}]
const geoScatter = (mapJson) => {
const geoCoordMap = [];
test.forEach((item, index) => {
mapJson.features.filter((element) => {
if (element.properties.name == item.name) {
geoCoordMap.push({
name: item.name,
value: element.properties.cp,
});
}
});
});
return geoCoordMap;
};
//生成地图数据 [{name: '台湾', value: 236}]
function initMapData(mapJson) {
const mapData = [];
test.forEach((item, index) => {
mapJson.features.filter((element) => {
if (element.properties.name == item.name) {
mapData.push({
name: item.name,
value: item.rate,
balance: item.balance,
badDebts: item.badDebts,
});
}
});
});
console.log("mapData数据", mapData);
// for (var i = 0; i < mapJson.features.length; i++) {
// mapData.push({
// name: mapJson.features[i].properties.name,
// value: Math.round(Math.random() * 10000),
// //id:mapJson.features[i].id
// });
// }
return mapData;
}
//处理
const convertData = (flag, mapJson) => {
if (!flag) {
const data = initMapData(mapJson);
console.log("地图数据", data);
return data;
} else {
const geoCoordMap = geoScatter(mapJson);
console.log("散点数据", geoCoordMap);
return geoCoordMap;
}
};
//option配置
function getoptions(name, mapJson) {
const option = {
geo: {
map: name,
zoom: 1.1,
roam: true,
left:"10%",
top:"10%",
grid: {
top: "0px",
right: "0px",
bottom: "0px",
left: "0px",
},
emphasis: {
itemStyle: {
color:"inherit",
borderColor: "#fff",
borderWidth: 2,
},
},
},
title: {
text: "降水量",
left: "center",
},
tooltip: {
trigger: "item", //数据项图形触发
showDelay: 0,
transitionDuration: 0.2,
hideDelay: 200,
},
visualMap: {
type: "piecewise",
textGap: 10,
itemGap: 16,
right: "auto",
left: "1",
orient: "horizontal",
pieces: [
{
gte: 1,
lt: 25,
color: "#fa4",
label: "1-25",
},
{
gte: 25,
lt: 50,
color: "#a4f",
label: "26-50",
},
{
gte: 50,
lt: 75,
color: "#f15",
label: "51-75",
},
{
gte: 75,
lt: 100,
color: "#1aff21",
label: "76-100",
},
],
itemWidth: "12",
itemheight: "12",
seriesIndex: [0],
textStyle: {
color: "rgba(105,105,116,1)",
overflow: "breakAll",
},
},
series: [
{
type: "map",
map: name,
roam: false,
geoIndex: 0, //重要
label: {
show: true,
verticalAlign: "bottom",
color: "#969896",
},
tooltip: {
formatter: function (params) {
if (params.data != undefined) {
return (
params.name +
"<br/>value1: " +
params.data.balance +
"<br/>value2：" +
params.data.badDebts +
"<br/>value3：" +
params.value +
"%"
);
}
return;
},
},
data: convertData(false, mapJson),
},
//散点图
{
type: "effectScatter",
symbol:
"path://M910.199521 304.727853L539.173184 142.199521c-0.408619-0.20431-0.919393-0.408619-1.328012-0.612929-2.553871-1.532322-13.484437-7.559457-25.334398-8.070231h-1.328013c-11.952115 0.612929-22.780527 6.537909-25.436552 8.070231-0.408619 0.20431-0.817239 0.510774-1.328013 0.612929L114.209098 304.727853c-6.537909 2.553871-10.419792 9.09178-10.419792 15.527534v19.613727c0 6.742219 5.414206 12.156425 12.156424 12.156425h40.044693c5.516361 0 10.317638 3.575419 11.747805 8.88747 5.005587 19.102953 26.253791 17.97925 29.6249 17.77494h628.252195c3.371109 0.306464 24.619314 1.430168 29.6249-17.77494 1.430168-5.312051 6.231445-8.88747 11.747806-8.88747h40.044692c6.742219 0 12.156425-5.414206 12.156425-12.156425v-18.592179c0-0.612929 0.102155-1.328013 0.20431-1.940941 0.715084-6.027135-3.064645-11.441341-9.193935-14.608141z m-26.66241 510.569833H140.769354c-28.501197 0-27.888268 27.888268-27.888269 27.888268v34.528332c0 6.742219 5.414206 12.156425 12.156425 12.156424h774.12929c6.742219 0 12.156425-5.414206 12.156424-12.156424v-34.528332c0.102155 0 0.817239-27.888268-27.786113-27.888268zM221.267358 419.447725v314.126098h-31.770151c-23.495611 0-26.764565 22.269753-27.173185 26.560255 0 0.408619-0.102155 0.817239-0.102154 1.123703v13.893057c0 6.742219 5.414206 12.156425 12.156424 12.156425h676.877893c6.742219 0 12.156425-5.414206 12.156425-12.156425v-13.893057c0-0.408619 0-0.817239-0.102155-1.123703-0.408619-4.290503-3.677574-26.560255-27.173184-26.560255h-31.770152V419.447725c0-6.742219-5.414206-12.156425-12.156425-12.156424h-78.046289c-6.742219 0-12.156425 5.414206-12.156424 12.156424v314.126098h-62.314445V419.447725c0-6.742219-5.414206-12.156425-12.156425-12.156424h-77.43336c-6.742219 0-12.156425 5.414206-12.156425 12.156424v314.739027h-50.56664V419.447725c0-6.742219-5.414206-12.156425-12.156424-12.156424h-77.43336c-6.742219 0-12.156425 5.414206-12.156425 12.156424v314.126098h-62.314445V419.447725c0-6.742219-5.414206-12.156425-12.156425-12.156424h-77.43336c-7.048683 0-12.462889 5.414206-12.462889 12.156424z m0-12.156424",
roam: false,
coordinateSystem: "geo",
map: name,
geoIndex: 0,
itemStyle: {
color: "blue",
},
label: {
show: false,
},
tooltip: {
formatter: function (params) {
return "这里填充数据表";
},
},
data: convertData(true, mapJson),
},
],
};
return option;
}
//注册和设置option
function registerAndsetOption(myChart, id, name, mapJson, flag) {
console.log("注册和设置opteion", myChart, id, name, mapJson, flag);
echarts.registerMap(name, mapJson);
const options = getoptions(name, mapJson);
myChart.setOption(options); //绘制
}
//1.获取地图json文件,挂载上地图，点击事件
function getMapJson() {
axios
.get("../../src/assets/json/map/" + chinaId + ".json", {})
.then((response) => {
const mapJson = response.data;
console.log("中国地图响应数据", mapJson);
const chinaJson = mapJson;
const myChart = echarts.init(mapChart.value); //挂载上
registerAndsetOption(myChart, chinaId, chinaName.value, mapJson, false);
const parentId = chinaId;
const parentName = "china";
myChart.on("click", function (param) {
const cityId = cityMap[param.name];
console.log(cityId, "城市ID");
if (cityId) {
axios
.get("../../src/assets/json/map/" + cityId + ".json", {})
.then((response) => {
console.log("当前请求的级别时（下钻了）", cityId, param.name);
const mapJson = response.data;
registerAndsetOption(myChart, cityId, param.name, mapJson, true);
});
} else {
registerAndsetOption(myChart, chinaId, chinaName, chinaJson, false);
const mapStack = [];
const parentId = chinaId;
const parentName = chinaName;
}
});
});
}
</script>
<style lang="less" scoped>
.map2 {
width: 100%;
height: 100%;
background-color: aquamarine;
}
</style>
完结~
1412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
