Vue + ECharts 实现山东地图展示与交互

news2024/12/25 12:18:20

这篇文章中,我将逐步介绍如何使用 Vue 和 ECharts 实现一个互动式的地图展示组件,其中支持返回上一层地图、点击查看不同城市的详细信息,以及根据数据动态展示不同的统计信息。

效果图:玩转山东地图:用Echarts打造交互式数据可视化--好玩篇_excharts 山东地图-CSDN博客

我将分为以下几部分进行详细讲解:

  1. 项目结构与组件基本框架
  2. ECharts 的基本配置与地图初始化
  3. 动态加载不同地区地图数据
  4. 地图交互:点击事件与返回上一层功能
  5. 自定义 Tooltip 和图标
  6. 样式与布局调整

1. 项目结构与组件基本框架

首先,定义了一个 Vue 组件 MapComponent,它将负责渲染地图、处理用户交互,并展示传递给它的数据。

<template>
  <div class="map_style">
    <!-- 返回按钮,只有在有历史记录时显示 -->
    <Button
      type="primary"
      @click="goBack"
      class="go_back_index"
      v-if="mapStack.length > 1"
    >返回</Button>

    <!-- 地图容器 -->
    <div
      ref="chart"
      style="height: 100%; width: 100%"
      class="chart-container"
    ></div>
  </div>
</template>

在模板中,主要有两个部分:

  • 返回按钮: 当 mapStack 中有多个历史记录时,返回按钮会显示,用于返回上一层地图。
  • 地图容器: 这是 ECharts 渲染地图的地方,通过 ref="chart" 获取容器 DOM。

2. ECharts 的基本配置与地图初始化

mounted 生命周期钩子中,初始化了 ECharts 图表并注册了地图数据:

mounted () {
  this.$nextTick(() => {
    this.initChart();
  })
  window.addEventListener('resize', this.handleResize); // 窗口变化时调整图表大小
}

initChart 方法中,注册了山东省的地图数据并初始化了 ECharts 实例:

initChart () {
  // 注册山东省地图
  this.$echarts.registerMap('shandong', this.mapData['山东省']);
  // 初始化 ECharts 实例
  this.chart = this.$echarts.init(this.$refs.chart);

  // 监听地图点击事件,点击后进入下一级地图
  this.chart.on('click', ({ name }) => {
    if (this.mapData[name] && name !== this.currentCity) {
      // 进入下一级地图
      this.mapStack.push(name);
      this.setMapData(name);
    }
  });

  // 设置地图选项
  this.setMapData(this.currentCity);
}

3. 动态加载不同地区地图数据

地图数据在 mapData 中以城市名称为键,地图 JSON 文件为值。每个城市的数据可以通过 require 动态加载。例如:

mapData: {
  '山东省': require('./shangdong.json'),
  '青岛市': require('../json/青岛市.json'),
  '济南市': require('../json/济南市.json'),
  ...
}

4. 地图交互:点击事件与返回上一层功能

当点击地图中的某个城市时,会更新地图为该城市的地图数据,并将当前城市名称加入到 mapStack 中以实现返回功能。goBack 方法会弹出当前城市并加载上一层城市的地图数据。

goBack () {
  if (this.mapStack.length > 1) {
    this.mapStack.pop(); // 弹出当前城市
    this.setMapData(this.mapStack[this.mapStack.length - 1]); // 设置上一城市的数据
  }
}

5. 自定义 Tooltip 和图标

地图上的每个城市展示的数据通过 tooltipFormatter 方法进行自定义格式化,显示每个城市的相关信息,如总用户数、平均积分、平均时长等。

tooltipFormatter (params) {
  const marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#284979;"></span>`;
  const cityName = `<h3>${(params.data && params.data.name) || params.name || '暂无单位'}</h3>`;
  const totalUser = marker + '人数:' + (params.data && params.data.totalUser || 0) + '<br />';
  const score = marker + '平均积分:' + (params.data && params.data.score || 0) + '<br />';
  const duration = marker + '平均时长:' + (params.data && params.data.duration || 0);
  return cityName + totalUser + score + duration ;
}

这段代码通过判断 params.data 是否存在,动态生成显示城市信息的 HTML 格式。

6. 样式与布局调整

对于地图组件的样式,使用了 scoped 样式进行隔离,确保组件的样式不会污染到其他部分:

.map_style {
  position: relative;
  height: 100%;
  width: 100%;
}

.go_back_index {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index:999;
}

.chart-container {
  border-radius: 10px;
  overflow: hidden;
}
  • map_style 类定义了组件的外部容器样式,确保其占满父容器。
  • go_back_index 类定义了返回按钮的位置,确保它在页面的左上角,且 z-index 很高,以便始终显示在其他内容之上。
  • chart-container 类定义了地图容器的外观,给它设置了圆角和隐藏溢出部分的效果。
 总结:

文章介绍了如何使用 Vue 和 ECharts 实现一个交互式地图组件。通过以下几个步骤实现了地图的基本功能:

  1. 初始化 ECharts 和地图数据;
  2. 支持返回上一层地图的功能;
  3. 根据点击的城市动态加载该城市的地图和数据;
  4. 自定义地图的 Tooltip,展示城市的相关统计信息;
  5. 对组件进行了样式和布局的优化,确保地图组件可以灵活适应不同的屏幕尺寸。

通过组件,可以灵活地展示不同城市或地区的数据,并允许用户点击进入查看更详细的统计信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2265280.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

我的JAVA-Web基础(2)

1.JDBC 防止sql注入 2.JSP JSP的基本语法 基本语法是 <% %> Java代码 <% %> 输出变量 可以转换成${变量}的EL表达式 <%! %>定义变量 JSP的基本语法包括以下几个主要部分&#xff1a; 1. 表达式&#xff08;Expression&#xff09; 表达式用于将…

新闻网站的个性化推荐:机器学习的应用

3.1可行性分析 开发者在进行开发系统之前&#xff0c;都需要进行可行性分析&#xff0c;保证该系统能够被成功开发出来。 3.1.1技术可行性 开发该新闻网站所采用的技术是vue和MYSQL数据库。计算机专业的学生在学校期间已经比较系统的学习了很多编程方面的知识&#xff0c;同时也…

IIC驱动EEPROM

代码参考正点原子 i2c_dri:主要是三段式状态机的编写 module iic_dri#(parameter SLAVE_ADDR 7b1010000 , //EEPROM从机地址parameter CLK_FREQ 26d50_000_000, //模块输入的时钟频率parameter I2C_FREQ 18d250_000 //IIC_SCL的时钟频率)( …

【动手学轨迹预测】2.3 场景表征方法

场景表征是指在所有可用的场景信息数据中, 提取出对于预测网络有用的数据, 并将其转换为易于模型学习的数据格式. 对于预测网络来说, 最重要的数据是交通参与者的历史轨迹和地图信息, 表达它们的常见方法有:栅格化和稀疏化 2.1.1 栅格化 多通道表达 如上图所示, 将历史轨迹和…

亚信安全举办“判大势 悟思想 强实践”主题党日活动

为深入学习和贯彻党的二十届三中全会精神&#xff0c;近日&#xff0c;亚信安全举办了 “学习贯彻党的二十届三中全会精神——‘判大势 悟思想 强实践’党日活动”&#xff0c;并取得圆满成功。 本次活动特邀南京市委宣讲团成员、南京市委党校市情研究中心主任王辉龙教授出席。…

医疗大模型威胁攻击下的医院AI安全:挑战与应对策略

一、引言 1.1 研究背景与意义 随着人工智能技术的迅猛发展,医疗大模型作为一种新兴的技术手段,正逐渐渗透到医疗领域的各个环节,为医疗服务的数字化转型带来了前所未有的机遇。从辅助诊断到疾病预测,从个性化治疗方案的制定到医疗资源的优化配置,医疗大模型展现出了巨大…

如何在谷歌浏览器中使用内置翻译功能

谷歌浏览器作为全球最受欢迎的网络浏览器之一&#xff0c;提供了强大且便捷的内置翻译功能。这一功能帮助用户轻松跨越语言障碍&#xff0c;浏览不同语言的网页内容。本文将详细介绍如何在谷歌浏览器中使用其内置翻译功能。 一、启用谷歌浏览器内置翻译功能 1、打开谷歌浏览器…

【MySQL】7.0 入门学习(七)——MySQL基本指令:帮助、清除输入、查询等

1.0 help &#xff1f; 帮助指令&#xff0c;查询某个指令的解释、用法、说明等。详情参考博文&#xff1a; 【数据库】6.0 MySQL入门学习&#xff08;六&#xff09;——MySQL启动与停止、官方手册、文档查询 https://www.cnblogs.com/xiaofu007/p/10301005.html 2.0 在cmd命…

基于推理的目标检测 DetGPT

基于推理的目标检测 DetGPT flyfish detgpt.github.io 近年来&#xff0c;由于大型语言模型&#xff08;LLMs&#xff09;的发展&#xff0c;计算机视觉领域取得了重大进展。这些模型使人类与机器之间能够进行更有效、更复杂的交互&#xff0c;为模糊人类与机器智能界限的新技…

概率论 期末 笔记

第一章 随机事件及其概率 利用“四大公式”求事件概率 全概率公式与贝叶斯公式 伯努利概型求概率 习题 推导 一维随机变量及其分布 离散型随机变量&#xff08;R.V&#xff09;求分布律 利用常见离散型分布求概率 连续型R.V相关计算 利用常见连续型分布的计算 均匀分布 正态…

探索 Python编程 调试案例:计算小程序中修复偶数的bug

在 学习Python 编程的过程里&#xff0c;会遇到各种各样的bug。而修复bug调试代码就像是一场充满挑战的侦探游戏。每一个隐藏的 bug 都是谜题&#xff0c;等待开发者去揭开真相&#xff0c;让程序可以顺利运行。今天&#xff0c;让我们通过一个实际案例&#xff0c;深入探索 Py…

Redis 介绍和安装

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Redis 入门介绍 收录于专栏[redis] 本专栏旨在分享学习Linux的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 本章将带领读者进入 Redis 的世…

springboot480基于springboot高校就业招聘系统设计和实现(论文+源码)_kaic

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…

【基础篇】1. JasperSoft Studio编辑器与报表属性介绍

编辑器介绍 Jaspersoft Studio有一个多选项卡编辑器&#xff0c;其中包括三个标签&#xff1a;设计&#xff0c;源代码和预览。 Design&#xff1a;报表设计页面&#xff0c;可以图形化拖拉组件设计报表&#xff0c;打开报表文件的主页面Source&#xff1a;源代码页码&#xff…

【河南新标】豫财预〔2024〕105号-《关于省级政务信息化建设项目支出预算标准的规定》-费用标准解读系列29

2024年12月3日&#xff0c;河南省财政厅发布了《关于省级政务信息化建设项目支出预算标准的规定》豫财预〔2024〕105号。《关于省级政务信息化建设项目支出预算标准的规定 &#xff08;试行&#xff09;》&#xff08;豫财预 〔2020〕81号&#xff09;同时废止。新的豫财预〔20…

导入numpy报错:PyCapsule_Import could not import module “datetime“

背景 docker部署深度学习算法时&#xff0c;安装miniconda报错&#xff0c;报线程错误。 然后在构建镜像时把miniconda装进去没有问题。 然后把环境移进去发现报numpy导入错误 在python解释器尝试导入numpy发现还是报错 尝试重新装numpy&#xff0c;发现没有解决。 网上找解决方…

TANGO与LabVIEW控制系统集成

TANGO 是一个开源的设备控制和数据采集框架&#xff0c;主要用于管理实验室设备、自动化系统和工业设备。它为不同类型的硬件提供统一的控制接口&#xff0c;并支持设备之间的通信&#xff0c;广泛应用于粒子加速器、同步辐射光源、实验室自动化和工业控制等领域。 1. TANGO的核…

利用Circuit JS1再学学电子方面的知识(硬件)

1 电阻器 1.1 电阻并联 每个电阻电压相同&#xff0c;总电流等于各支路电流之和。 并联电阻值 R 1/(1/R11/R2);R约等于90.9 电阻并联后的阻值比最小的一个电阻值都小。 1.2 电阻串联 电阻串联的阻值为各电阻阻值相加。 RR1R2&#xff0c;串联涉及电阻分压。 一般在开关处…

使用Amazon Bedrock的无服务器的智能工作流

使用Amazon Bedrock的无服务器的智能工作流 智能工作流基于用户输入处理不可预见的任务&#xff0c;比如发起API调用。无服务器架构可以高效地管理这些任务和不同的工作负载&#xff0c;而无需维护服务器&#xff0c;从而加快部署速度。 你将学习如何通过使用带有保护措施的智能…

国高材服务 | 高分子结晶动力学表征——高低温热台偏光显微镜

众所周知&#xff0c;聚合物制品的实际使用性能&#xff08;如光学透明性、硬度、模量等&#xff09;与材料内部的结晶形态、晶粒大小及完善程度有着密切的联系&#xff0c;因此&#xff0c;对聚合物结晶形态等的研究具有重要的理论和实际意义。 随着结晶条件的不用&#xff0c…