Vue项目中使用ECharts构建交互式中国地图的详细指南
前言
欢迎来到我的技术小宇宙！ 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。
洛可可白：个人主页
个人专栏：✅前端技术 ✅后端技术
个人博客：洛可可白博客
代码获取：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 1 步骤 2: 安装中国地图数据
地图数据获取网站：阿里云数据可视化平台
ECharts 使用 JSON 格式的地理数据来渲染地图。你可以在上面这个网站下载中国省级行政区划的 JSON 文件。放入工程的静态文件目录下方。
步骤 3: 在 Vue 组件中引入 ECharts 和 地图数据在你的Vue组件中，引入ECharts和中国地图数据：
import * as echarts from "echarts"; import china from "@/assets/china.json"; // 引入中国地图数据 12 步骤 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); }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 步骤 5: 在模板中添加地图容器在你的Vue组件的模板中，添加一个容器来承载地图：
<template> <div class="content"> <div ref="charts" style="width: 1200px; height: 100vh; margin: 0 auto" ></div> </div> </template> 12345678 步骤 6: 调整和优化
.content { background-color: #0e2152; height: 100%; } 1234
根据你的实际需求，你可以调整地图的样式、颜色、数据等。你还可以为地图添加交互，如点击事件、提示框等。
立体效果
<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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140以上步骤展示了如何在Vue中使用ECharts创建一个基本的中国地图。你可以根据需要进一步定制地图，例如添加更多的视觉元素、交互功能或者根据实际数据动态更新地图。
往期精彩回顾
主流开发语言和开发环境、程序员如何选择职业赛道？
852阅读 · 27点赞 · 9收藏VS code搭建C/C++运行环境简单易上手
2803阅读 · 5点赞 · 8收藏Vue.2&Vue.3项目引入Element-UI教程&踩坑
9284阅读 · 22点赞 · 82收藏Vue项目引入Echarts可视化图表库教程&踩坑
2209阅读 · 3点赞 · 5收藏VirtualBox虚拟机搭建CentOS系统教程
4502阅读 · 4点赞 · 32收藏VS Code上搭建Vue开发环境
10709阅读 · 13点赞 · 66收藏Color-UI 简介及使用教程
5932阅读 · 2点赞 · 13收藏相关知识
2023版完整版web前端学习路线图（超详细自学路线）
vue项目（vue
Vue.js 增删查改库存管理系统教程：新手友好的完整代码与详细步骤」 「从零开始的库存管理系统：Vue.js 实现搜索、编辑、删除与数据更新」 「超详细的 Vue.js CRUD 教程：带你一步步构
Springboot+vue的网上鲜花商城管理系统。Javaee项目，springboot vue前后端分离项目。
Vue电商项目实战：从零开始构建你的在线商店
Springboot+vue的客户关系管理系统（有报告），Javaee项目，springboot vue前后端分离项目
基于java jsp ssm vue网上鲜花店网站设计实现vue
如何在Vue项目中使用vw实现移动端适配有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用
【Vue3 + Vite】6个非常强大的后台管理项目！开源且免费！
Sunflower 开源项目指南
网址: Vue项目中使用ECharts构建交互式中国地图的详细指南 https://m.huajiangbk.com/newsview1548651.html
| 上一篇: 免费下载：全国各级别行政边界数据 |
下一篇: 探索中国地理信息的宝库：中国省市 |
