一.效果图
二.代码实现
<template>
<div ref="chart" style="width: 100%; height: 500px;"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
const chart = ref(null);
const uploadedDataURL = "/src/components/map.json";
const initChart = (geoJson) => {
echarts.registerMap("china", geoJson);
const geoCoordMap = {
台湾: [121.5135, 25.0308],
黑龙江: [127.9688, 45.368],
内蒙古: [110.3467, 41.4899],
吉林: [125.8154, 44.2584],
北京市: [116.4551, 40.2539],
辽宁: [123.1238, 42.1216],
河北: [114.4995, 38.1006],
天津: [117.4219, 39.4189],
山西: [112.3352, 37.9413],
陕西: [109.1162, 34.2004],
甘肃: [103.5901, 36.3043],
宁夏: [106.3586, 38.1775],
青海: [101.4038, 36.8207],
新疆: [87.9236, 43.5883],
西藏: [91.11, 29.97],
四川: [103.9526, 30.7617],
重庆: [108.384366, 30.439702],
山东: [117.1582, 36.8701],
河南: [113.4668, 34.6234],
江苏: [118.8062, 31.9208],
安徽: [117.29, 32.0581],
湖北: [114.3896, 30.6628],
浙江: [119.5313, 29.8773],
福建: [119.4543, 25.9222],
江西: [116.0046, 28.6633],
湖南: [113.0823, 28.2568],
贵州: [106.6992, 26.7682],
云南: [102.9199, 25.4663],
广东: [113.12244, 23.009505],
广西: [108.479, 23.1152],
海南: [110.3893, 19.8516],
上海: [121.4648, 31.2891],
};
const data = [
{ name: "北京", value: 58743 },
{ name: "天津", value: 42 },
{ name: "河北", value: 102 },
{ name: "山西", value: 81 },
{ name: "内蒙古", value: 47 },
{ name: "辽宁", value: 67 },
{ name: "吉林", value: 82 },
{ name: "黑龙江", value: 123 },
{ name: "上海", value: 24 },
{ name: "江苏", value: 92 },
{ name: "浙江", value: 114 },
{ name: "安徽", value: 109 },
{ name: "福建", value: 116 },
{ name: "江西", value: 91 },
{ name: "山东", value: 119 },
{ name: "河南", value: 137 },
{ name: "湖北", value: 116 },
{ name: "湖南", value: 114 },
{ name: "重庆", value: 91 },
{ name: "四川", value: 16 },
{ name: "贵州", value: 62 },
{ name: "云南", value: 83 },
{ name: "西藏", value: 9 },
{ name: "陕西", value: 37569 },
{ name: "甘肃", value: 56 },
{ name: "青海", value: 10 },
{ name: "宁夏", value: 18 },
{ name: "新疆", value: 37589 },
{ name: "广东", value: 123 },
{ name: "广西", value: 59 },
{ name: "海南", value: 8500 },
{ name: "台湾", value: 18 },
];
const convertData = (data) => {
return data.map((item) => {
const geoCoord = geoCoordMap[item.name];
if (geoCoord) {
return {
name: item.name,
value: geoCoord.concat(item.value),
};
}
}).filter(item => item);
};
const option = {
// 选择框的配置
select: {
itemStyle: {
areaColor: "rgb(41,211,98)", // 选择时的区域颜色
}
},
// 背景颜色设置
backgroundColor: {
type: "linear", // 渐变类型
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0,
color: "white", // 渐变开始颜色
},
{
offset: 1,
color: "white", // 渐变结束颜色
},
],
globalCoord: false,
},
// 标题配置
title: {
top: 20,
subtext: "",
x: "center",
},
// 提示框配置
tooltip: {
trigger: "item", // 提示框触发类型为“item”
formatter: (params) => {
if (typeof params.value[2] === "undefined") {
return `${params.name} : ${params.value}`;
} else {
return `${params.name} : ${params.value[2]}`;
}
},
},
// 图例配置
legend: {
orient: "vertical",
y: "bottom",
x: "right",
data: ["pm2.5"], // 图例数据
textStyle: {
color: "#fff", // 图例文字颜色
},
},
// 视觉映射配置（颜色映射）
visualMap: {
min: 0,
max: 500,
left: "30%",
top: "bottom",
showLabel: true,
inRange: {},
pieces: [
{
gte: 54837,
lte: 73116,
label: "50000-70000 辆",
color: "rgb(61,220,115)",
},
{
gte: 36558,
lt: 54837,
label: "30000-50000 辆",
color: "rgb(75,229,125)",
},
{
gt: 18279,
lt: 36558,
label: "10000-300000 辆",
color: "rgb(107,236,150)",
},
{
gt: 0,
lt: 18279,
label: "0-18000 辆",
color: "rgb(136,243,170)",
}
],
show: true,
},
// 地图配置
geo: {
map: "china", // 使用的地图
show: true,
roam: false, // 禁止拖拽
// label: {
// normal: {
// show: false, //
// },
// emphasis: {
// show: false, //
// },
// },
itemStyle: {
normal: {
areaColor: "rgb(46,136,76)", // 南海岛
borderColor: "white", //边界颜色
},
emphasis: {
areaColor: "rgb(51,183,95)", // 高亮状态下的区域颜色
},
},
},
// 系列配置
series: [
{
symbolSize: 5, // 点的大小
label: {
normal: {
formatter: "{b}", // 标签格式
position: "right", // 标签位置
show: true, // 显示标签
},
emphasis: {
show: true, // 高亮状态下显示标签
},
},
itemStyle: {
normal: {
color: "#fff", // 点的颜色
},
},
name: "light",
type: "scatter", // 散点图
coordinateSystem: "geo", // 地理坐标系
data: convertData(data), // 数据
},
{
type: "map",
map: "china", // 使用的地图
geoIndex: 0,
aspectScale: 0.75, // 纵横比
showLegendSymbol: false, // 不显示图例标记
label: {
normal: {
show: false, // 普通状态下不显示标签
},
emphasis: {
show: false, // 高亮状态下不显示标签
textStyle: {
color: "#fff", // 高亮状态下的文字颜色
},
},
},
roam: true, // 是否允许缩放
itemStyle: {
emphasis: {
areaColor: "#2B91B7", // 高亮状态下的区域颜色
},
},
animation: false, // 禁用动画
data: data, // 数据
},
],
};
const myChart = echarts.init(chart.value);
myChart.setOption(option);
};
onMounted(() => {
axios.get(uploadedDataURL)
.then((response) => {
debugger
initChart(response.data);
})
.catch((error) => {
console.error("Failed to load geoJson data:", error);
});
});
</script>
<style>
/* Add any additional styling here */
</style>
三.必要的json数据
地理坐标-echarts-用于行政区渲染资源-CSDN文库