![cover](https://img-blog.csdnimg.cn/direct/a319c10f14024d8b94f8d104649bc1e3.jpeg)
Vue项目中使用ECharts构建交互式中国地图的详细指南
本指南为您提供了在Vue项目中创建和展示中国地图的详尽步骤。通过结合ECharts强大的数据可视化能力,您将学习如何安装必要的库、获取和集成中国地图的JSON数据,以及如何在Vue组件中配置和初始化地图实例。此外,本教程还涵盖了如何添加散点图和线条,以及如何通过CSS和额外的Vue模板代码实现地图的立体效果,从而增强用户体验。无论您是数据可视化的新手还是有经验的开发者,本指南都将帮助您轻松地在Vu
🌟 前言
欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白:个人主页
🏠 个人博客:洛可可白博客
🐱 代码获取:bestwishes0203
📷 封面壁纸:洛可可白wallpaper
文章目录
Vue项目中使用ECharts构建交互式中国地图的详细指南
效果图
获取示例 https://download.csdn.net/download/interest_ing_/88975343?spm=1001.2014.3001.5503
在Vue项目中使用ECharts创建中国地图,你需要遵循以下步骤:
步骤 1: 安装 ECharts 和 ECharts 相关插件
首先,确保你的项目中已经安装了ECharts。如果没有,可以使用npm或yarn来安装:
npm install echarts --save
步骤 2: 安装中国地图数据
地图数据获取网站:阿里云数据可视化平台
ECharts 使用 JSON 格式的地理数据来渲染地图。你可以在上面这个网站下载中国省级行政区划的 JSON 文件。放入工程的静态文件目录下方。
步骤 3: 在 Vue 组件中引入 ECharts 和 地图数据
在你的Vue组件中,引入ECharts和中国地图数据:
import * as echarts from "echarts";
import china from "@/assets/china.json"; // 引入中国地图数据
步骤 4: 创建地图实例并配置
在你的Vue组件的mounted
生命周期钩子中,创建ECharts实例并配置地图选项:
import { ref, onMounted, getCurrentInstance } from "vue";
import * as echarts from "echarts";
import china from "@/assets/china.json";
const mapData: any = china;
const points = ref([
// 散点图数据
{
name: "广东",
value: [113.266887, 23.133306],
itemStyle: { color: "#00EEFF" },
}, // 广东
]);
const linesData = ref([
{
coords: [
[116.407387, 39.904179],
[113.266887, 23.133306],
],
}, // 北京->广东
]);
const planePath = // 飞机svg
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
onMounted(() => {
// getCurrentInstance().refs.charts 获取charts节点对象
const Instance: any = getCurrentInstance();
const refCharts: any = Instance.refs.charts;
const charts: any = echarts.init(refCharts);
initCharts(charts);
});
function initCharts(charts: any) {
const option = {
backgroundColor: "#0E2152", // 背景颜色
geo: {
// 地图配置
map: "china",
label: {
// 图形上的文本标签
normal: {
// 通常状态下的样式
show: true,
textStyle: {
color: "#fff",
},
},
emphasis: {
// 鼠标放上去高亮的样式
textStyle: {
color: "#fff",
},
},
},
itemStyle: {
// 地图区域的样式设置
normal: {
// 通常状态下的样式
borderColor: "#5089EC",
borderWidth: 1,
areaColor: {
//地图区域的颜色
type: "radial", // 径向渐变
x: 0.5, // 圆心
y: 0.5, // 圆心
r: 0.8, // 半径
colorStops: [
{
// 0% 处的颜色
offset: 0,
color: "rgba(0, 102, 154, 0)",
},
{
// 100% 处的颜色
offset: 1,
color: "rgba(0, 102, 154, .4)",
},
],
},
},
// 鼠标放上去高亮的样式
emphasis: {
areaColor: "#2386AD",
borderWidth: 0,
},
},
},
series: [
{
// 散点系列数据
type: "effectScatter", // 带有涟漪特效动画的散点(气泡)图
coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
// 特效类型,目前只支持涟漪特效'ripple',意为“涟漪”
effectType: "ripple",
// 配置何时显示特效。可选'render'和'emphasis' 。
showEffectOn: "render",
rippleEffect: {
// 涟漪特效相关配置。
period: 10, // 动画的周期,秒数。
scale: 4, // 动画中波纹的最大缩放比例。
// 波纹的绘制方式,可选 'stroke' 和 'fill'。
brushType: "fill",
},
zlevel: 1, // 所有图形的 zlevel 值。
data: points.value,
},
{
// 线条系列数据
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"], // 标记的图形: 箭头
symbolSize: 10, // 标记的大小
effect: {
// 线条特效的配置
show: true,
period: 6, // 特效动画的时间,单位s
trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大,尾迹越重
symbol: planePath, // 特效图形的标记 可选'circle'等
symbolSize: 15, // 特效标记的大小
},
lineStyle: {
// 线条样式
normal: {
color: "#93EBF8",
width: 2.5, // 线条宽度
opacity: 0.6, // 尾迹线条透明度
curveness: 0.2, // 尾迹线条曲直度
},
},
data: linesData.value,
},
],
};
// 地图注册,第一个参数的名字必须和option.geo.map一致
echarts.registerMap("china", /**/ mapData);
charts.setOption(option);
}
步骤 5: 在模板中添加地图容器
在你的Vue组件的模板中,添加一个容器来承载地图:
<template>
<div class="content">
<div
ref="charts"
style="width: 1200px; height: 100vh; margin: 0 auto"
></div>
</div>
</template>
步骤 6: 调整和优化
.content {
background-color: #0e2152;
height: 100%;
}
根据你的实际需求,你可以调整地图的样式、颜色、数据等。你还可以为地图添加交互,如点击事件、提示框等。
立体效果
<template>
<div class="content">
<div class="chart-container">
<div ref="upperChartContainer" class="upper-chart"></div>
<div ref="lowerChartContainer" class="lower-chart"></div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import jiangxi from "@/assets/jiangxi.json";
const mapData: any = jiangxi;
const upperChartContainer = ref<HTMLElement | null>(null);
const lowerChartContainer = ref<HTMLElement | null>(null);
let upperChart: echarts.ECharts | null = null;
let lowerChart: echarts.ECharts | null = null;
onMounted(() => {
upperChart = echarts.init(upperChartContainer.value!);
lowerChart = echarts.init(lowerChartContainer.value!);
initUpperChart();
initLowerChart();
addClickEventListener();
});
onBeforeUnmount(() => {
if (upperChart) {
upperChart.dispose();
upperChart = null;
}
if (lowerChart) {
lowerChart.dispose();
lowerChart = null;
}
});
function initUpperChart() {
echarts.registerMap("jiangxi", mapData);
const option: echarts.EChartsOption = {
backgroundColor: "transparent",
series: [
{
type: "map",
map: "jiangxi",
roam: false,
emphasis: {
label: {
show: true,
},
},
itemStyle: {
areaColor: "#0e2152", // 上层地图颜色
},
data: [],
},
],
};
if (upperChart) {
upperChart.setOption(option);
}
}
function initLowerChart() {
echarts.registerMap("jiangxi", mapData);
const option: echarts.EChartsOption = {
backgroundColor: "transparent",
title: {
text: "地图",
left: "center",
textStyle: {
color: "#000",
fontSize: 28,
},
},
tooltip: {
trigger: "item",
formatter: (params: any) => {
// const { name, center, centroid } = params;
return `地区名称: ${params.name}<br/>ID: ${params.dataIndex}`;
},
},
series: [
{
type: "map",
map: "jiangxi",
roam: false,
emphasis: {
label: {
show: true,
},
},
itemStyle: {
areaColor: "#fff", // 下层地图颜色
},
label: {
show: true,
},
data: [],
},
],
};
if (lowerChart) {
lowerChart.setOption(option);
}
}
function addClickEventListener() {
if (lowerChart) {
lowerChart.on("click", (params: any) => {
if (params.name) {
console.log("点击了上层地图区域:" + params.name);
}
});
}
}
</script>
<style scoped>
.chart-container {
width: 100%;
height: 800px;
}
.upper-chart {
width: 100%;
height: 100vh; /* 总高度为 800 像素,上下距离为 50 像素,因此上层地图高度为 750 像素 */
}
.lower-chart {
width: 100%;
height: 100vh;
transform: translateY(-101vh) translateX(-10px);
}
</style>
以上步骤展示了如何在Vue中使用ECharts创建一个基本的中国地图。你可以根据需要进一步定制地图,例如添加更多的视觉元素、交互功能或者根据实际数据动态更新地图。
🎉 往期精彩回顾
- 852阅读 · 27点赞 · 9收藏
- 2803阅读 · 5点赞 · 8收藏
Vue.2&Vue.3项目引入Element-UI教程&踩坑
- 9284阅读 · 22点赞 · 82收藏
- 2209阅读 · 3点赞 · 5收藏
- 4502阅读 · 4点赞 · 32收藏
- 10709阅读 · 13点赞 · 66收藏
- 5932阅读 · 2点赞 · 13收藏
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)