地图 MAP
1. 获取地图 JSON 数据
去 http://datav.aliyun.com/portal/school/atlas/area_selector
下载对应的数据
左侧是地图,右侧是 JSON 数据路径,点击你想要生成的地图省市、地级(以广西省为例);
注意
点进去是一级,再点进去是二级,直到你想要的省市地区(点击旁边的空白可以返回上一级);
然后其右侧有 JSON 数据的链接地址,可以选择下载下来(放在 json 文件夹中),也可以使用在线地址!(json API 与 geoJSON 数据地址均可用)
2. 配置 API
使用 axios 获取数据(使用在线链接):
3. 开始绘制
1. 引入地图数据
js
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";
import mapresult from "@/assets/json/area2.json"; // 我这里是下载下来了 你也可以自己加载
2. 准备容器
js
<div style="width:800px;height:600px" ref="chartsDOM" id="main"></div>
3. 绘制地图
html
<template>
<div class="page">
<div class="title">电压瞬时波峰图</div>
<div id="main"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";
import mapresult from "@/assets/json/area2.json";
const myChart = ref(null);
onMounted(() => {
echartinit();
});
onBeforeUnmount(() => {
window.removeEventListener("resize", function () {
myChart.value.resize();
});
});
const echartinit = () => {
// 找到Echart元素
const chartDom = document.getElementById("main");
// 默认的时候支持light或者dark两种样式 必须引入markRaw 取消数据响应
myChart.value = markRaw(echarts.init(chartDom, "light"));
// 加载地图
echarts.registerMap("GX", mapresult); //加载地图
// 指定图表的配置项和数据
// 指定图表的配置项和数据
let options = {
series: [
{
name: "广西地图",
type: "map",
map: "GX", // 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
label: {
show: true,
},
},
],
};
myChart.value.setOption(options);
// 监听改变大小
window.addEventListener("resize", function () {
myChart.value.resize();
});
};
</script>
<style lang="scss" scoped>
.page {
overflow: hidden;
.title {
font-size: 16px;
color: black;
margin: 0 auto;
text-align: center;
font-size: 36px;
}
#main {
width: 100%;
height: 100vh;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
}
}
</style>
4. 配置项
js
let options = {
series: [
{
name: "广西地图",
type: "map",
map: "GX", // 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
label: {
show: true,
},
data: [
{ name: "南宁市", value: 12001 },
{ name: "崇左市", value: 12001 },
{ name: "柳州市", value: 12001 },
{ name: "来宾市", value: 12001 },
{ name: "桂林市", value: 12001 },
{ name: "梧州市", value: 12001 },
{ name: "贺州市", value: 12001 },
{ name: "玉林市", value: 12001 },
{ name: "贵港市", value: 12001 },
{ name: "百色市", value: 12001 },
{ name: "钦州市", value: 12001 },
{ name: "河池市", value: 12001 },
{ name: "北海市", value: 12001 },
{ name: "防城港市", value: 12001 },
],
},
],
};
5. 配置提示框
js
let options = {
tooltip: {}, // 配置提示框,有这个配置项即可
series: [
{
name: "广西地图",
type: "map",
map: "GX", // 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
label: {
show: true,
},
data: [
{ name: "南宁市", value: 12001 },
{ name: "崇左市", value: 12001 },
{ name: "柳州市", value: 12001 },
{ name: "来宾市", value: 12001 },
{ name: "桂林市", value: 12001 },
{ name: "梧州市", value: 12001 },
{ name: "贺州市", value: 12001 },
{ name: "玉林市", value: 12001 },
{ name: "贵港市", value: 12001 },
{ name: "百色市", value: 12001 },
{ name: "钦州市", value: 12001 },
{ name: "河池市", value: 12001 },
{ name: "北海市", value: 12001 },
{ name: "防城港市", value: 12001 },
],
},
],
};
加标题
js
var options = {
title: {
text: "广西GDP统计图(/万元)",
},
tooltip: {}, // 配置提示框,有这个配置项即可
series: [
{
name: "广西地图",
type: "map",
map: "GX", // 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
label: {
show: true,
},
data: [
{ name: "南宁市", value: 12001 },
{ name: "崇左市", value: 12001 },
{ name: "柳州市", value: 12001 },
{ name: "来宾市", value: 12001 },
{ name: "桂林市", value: 12001 },
{ name: "梧州市", value: 12001 },
{ name: "贺州市", value: 12001 },
{ name: "玉林市", value: 12001 },
{ name: "贵港市", value: 12001 },
{ name: "百色市", value: 12001 },
{ name: "钦州市", value: 12001 },
{ name: "河池市", value: 12001 },
{ name: "北海市", value: 12001 },
{ name: "防城港市", value: 12001 },
],
},
],
};
依据配置不同显示不同的颜色
- 完整代码
html
<!--
* @Author: jsopy
* @Date: 2025-05-07 14:22:57
* @LastEditTime: 2025-05-08 14:58:22
* @FilePath: /demo1/src/pages/index2.vue
* @Description:
*
-->
<template>
<div class="page">
<div class="title">电压瞬时波峰图</div>
<div id="main"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount, markRaw } from "vue";
import mapresult from "@/assets/json/area2.json";
const myChart = ref(null);
onMounted(() => {
echartinit();
});
onBeforeUnmount(() => {
window.removeEventListener("resize", function () {
myChart.value.resize();
});
});
const echartinit = () => {
// 找到Echart元素
const chartDom = document.getElementById("main");
// 默认的时候支持light或者dark两种样式 必须引入markRaw 取消数据响应
myChart.value = markRaw(echarts.init(chartDom, "light"));
// 加载地图
echarts.registerMap("GXMap", mapresult); //加载地图
// 指定图表的配置项和数据
// 指定图表的配置项和数据
let options = {
visualMap: {
min: 1111,
max: 333332,
realtime: false,
calculable: true,
inRange: {
color: ["lightskyblue", "yellow", "orangered"],
},
},
tooltip: {}, // 配置提示框,有这个配置项即可
series: [
{
name: "广西地图",
type: "map",
map: "GXMap", // 这个是上面注册时的名字哦,registerMap('这个名字保持一致')
label: {
show: true,
},
data: [
{ name: "南宁市", value: 12001 },
{ name: "崇左市", value: 12001 },
{ name: "柳州市", value: 12001 },
{ name: "来宾市", value: 12001 },
{ name: "桂林市", value: 233332 },
{ name: "梧州市", value: 12001 },
{ name: "贺州市", value: 12001 },
{ name: "玉林市", value: 333330 },
{ name: "贵港市", value: 12001 },
{ name: "百色市", value: 12001 },
{ name: "钦州市", value: 135332 },
{ name: "河池市", value: 12001 },
{ name: "北海市", value: 12001 },
{ name: "防城港市", value: 313332 },
],
},
],
};
myChart.value.setOption(options);
// 监听改变大小
window.addEventListener("resize", function () {
myChart.value.resize();
});
};
</script>
<style lang="scss" scoped>
.page {
overflow: hidden;
.title {
font-size: 16px;
color: black;
margin: 0 auto;
text-align: center;
font-size: 36px;
}
#main {
width: 1000px;
height: 800px;
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
}
}
</style>