地图
原创...大约 4 分钟
地图主要用于地理区域数据的可视化
import * as echarts from "echarts";
export default {
install: (app: any) => {
app.config.globalProperties.$map = (id: any) => {
var chartDom = document.getElementById(id)!;
if (chartDom == null) {
return;
}
echarts.dispose(chartDom);
var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
$.get(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
(geoJson: any) => {
echarts.registerMap("China", geoJson); // 注册地图
const option = {
series: [
{
name: "中国地图",
type: "map",
map: "China", // 与注册的保持字段一致
roam: true, // 允许缩放
zoom: 1.5,
label: {
// 显示文本
show: true,
fontSize: 8,
},
itemStyle: {
//地图区域的多边形 图形样式。
areaColor: "purple", // 地图区域的颜色。
borderColor: "yellow", //描边颜色
borderWidth: 0, //描边线宽
},
},
],
};
myChart.setOption(option);
}
);
};
},
};
相关信息
加载地图资源需要进行网络请求，这里使用 jquery 进行，需要提前安装 jquery
npm install jquery --save
npm install @types/jquery --save
npm install @rollup/plugin-inject --save
在 main.ts 中引入
import $ from "jquery";
createApp(App).use($);
配置 vite.config.ts
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import inject from "@rollup/plugin-inject";
export default defineConfig({
plugins: [
vue(),
vueJsx(),
inject({
$: "jquery", // 这里会自动载入 node_modules 中的 jquery jquery全局变量
jQuery: "jquery",
"windows.jQuery": "jquery",
}),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});
地图常用属性(visualMap)
import * as echarts from "echarts";
export default {
install: (app: any) => {
app.config.globalProperties.$map = (id: any) => {
var chartDom = document.getElementById(id)!;
if (chartDom == null) {
return;
}
echarts.dispose(chartDom);
var myChart = echarts.init(chartDom, "", { width: 500, height: 300 });
$.get(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
(geoJson: any) => {
echarts.registerMap("China", geoJson); // 注册地图
const option = {
tooltip: {
show: true, // 是否显示提示组件
triggerOn: "mousemove",
},
visualMap: {
// type=piecewises时
// type: "piecewise", // 可选 piecewise（点击块） ， continuous（滑动）
// orient: 'vertical', // 水平 'horizontal'或者竖直'vertical'
// pieces: [ // 匹配数据
// { min: 0, max: 0, color: "#fff" },
// { min: 1, max: 10, color: "#fdfdcf" },
// { min: 10, max: 100, color: "#fe9e83" },
// { min: 100, max: 1000, color: "#e55a4e" },
// { min: 1000, max: 10000, color: "#4f070d" },
// ]
// type=piecewises时
type: "continuous",
min: 1,
max: 10000,
text: ["高", "低"],
realtime: true, //拖拽时，是否实时更新。
calculable: true, //是否显示拖拽用的手柄范围
inRange: {
// 滑块的颜色
color: ["lightskyblue", "yellow", "orangered"],
},
},
series: [
{
name: "中国地图",
type: "map",
map: "China", // 与注册的保持字段一致
roam: true, // 允许缩放
zoom: 1.5,
aspectScale: 0.75, // 宽高拉伸
label: {
// 显示文本
show: true,
fontSize: 8,
},
itemStyle: {
//地图区域的多边形 图形样式。
areaColor: "purple", // 地图区域的颜色。
borderColor: "yellow", //描边颜色
borderWidth: 0, //描边线宽
},
data: [
{ name: "内蒙古自治区", value: 94 },
{ name: "四川省", value: 201 },
{ name: "山东省", value: 2101 },
],
},
],
};
myChart.setOption(option);
}
);
};
},
};
地图立体效果(geo)
import * as echarts from "echarts";
export default {
install: (app: any) => {
app.config.globalProperties.$map = (id: any) => {
var chartDom = document.getElementById(id)!;
if (chartDom == null) {
return;
}
echarts.dispose(chartDom);
var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
$.get(
"https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
(geoJson: any) => {
echarts.registerMap("China", geoJson); // 注册地图
const option = {
tooltip: {
show: true, // 是否显示提示组件
triggerOn: "mousemove",
},
geo: [
{
map: "China",
zlevel: 2, // z-index
label: {
show: true,
fontSize: 8,
},
itemStyle: {
areaColor: "#f1f1f1",
borderColor: "rgba(0,0,0,0.2)",
},
},
{
map: "China",
top: "11.5%",
zlevel: 1,
label: {
show: false,
},
itemStyle: {
areaColor: "rgba(0,0,0,0.2)",
borderColor: "rgba(0,0,0,0.2)",
borderWidth: "1", // 边框宽度
shadowColor: "#fff", // 外部阴影
shadowBlur: "10",
},
emphasis: {
disabled: true,
},
},
],
};
myChart.setOption(option);
}
);
};
},
};
香港人口密度
import * as echarts from "echarts";
export default {
install: (app: any) => {
app.config.globalProperties.$map = (id: any) => {
var chartDom = document.getElementById(id)!;
if (chartDom == null) {
return;
}
echarts.dispose(chartDom);
var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
$.get(
"https://geo.datav.aliyun.com/areas_v3/bound/810000_full.json",
(geoJson: any) => {
echarts.registerMap("HK", geoJson); // 注册地图
const option = {
tooltip: {
show: true, // 是否显示提示组件
triggerOn: "mousemove",
trigger: "item",
formatter: "{b}<br/>{c} (p / km2)",
},
visualMap: {
min: 800,
max: 50000,
text: ["高", "低"],
realtime: true,
calculable: true,
inRange: {
color: ["lightskyblue", "yellow", "orangered"],
},
},
series: [
{
type: "map",
map: "HK",
zoom: 1.2,
label: {
show: true,
fontSize: 8,
},
data: [
{ name: "中西区", value: 20057.34 },
{ name: "湾仔区", value: 15477.48 },
{ name: "东区", value: 31686.1 },
{ name: "南区", value: 6992.6 },
{ name: "油尖旺区", value: 44045.49 },
{ name: "深水埗区", value: 40689.64 },
{ name: "九龙城区", value: 37659.78 },
{ name: "黄大仙区", value: 45180.97 },
{ name: "观塘区", value: 55204.26 },
{ name: "葵青区", value: 21900.9 },
{ name: "荃湾区", value: 4918.26 },
{ name: "屯门区", value: 5881.84 },
{ name: "元朗区", value: 4178.01 },
{ name: "北区", value: 2227.92 },
{ name: "大埔区", value: 2180.98 },
{ name: "沙田区", value: 9172.94 },
{ name: "西贡区", value: 3368 },
{ name: "离岛区", value: 806.98 },
],
// 自定义名称映射（如果数据源不能识别的话需要映射）
// nameMap: {
// 'Central and Western': '中西区',
// Eastern: '东区',
// Islands: '离岛区',
// 'Kowloon City': '九龙城区',
// 'Kwai Tsing': '葵青区',
// 'Kwun Tong': '观塘区',
// North: '北区',
// 'Sai Kung': '西贡区',
// 'Sha Tin': '沙田区',
// 'Sham Shui Po': '深水埗区',
// Southern: '南区',
// 'Tai Po': '大埔区',
// 'Tsuen Wan': '荃湾区',
// 'Tuen Mun': '屯门区',
// 'Wan Chai': '湾仔区',
// 'Wong Tai Sin': '黄大仙区',
// 'Yau Tsim Mong': '油尖旺区',
// 'Yuen Long': '元朗区'
// }
},
],
};
myChart.setOption(option);
}
);
};
},
};
Powered by Waline v2.15.7