鱿鱼公司业务，本文将详细解析如何使用 Vue3 和 ECharts 实现市级地图展示功能，并添加地图切换时的平滑过渡动画效果。 1. 使用 ECharts 的 `universalTransition` 实现地图切换动画 2. 通过 Canvas 动态处理图像实现区域高亮效果 3. 设计响应式布局确保地图适应不同屏幕尺寸 4. 实现层级导航和交互反馈提升用户体验 ## 功能概述 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/864dc7b6b600406cb966b1041f3b0d1f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgQ0YxNOW5tOiAgeWFtQ==:q75.awebp?rk3s=f64ab15b&x-expires=1762386127&x-signature=95S%2ButoPycvA3HdEBh9eFhI4iiQ%3D) 本组件实现了一个具有以下特性的地图展示系统： 1. 展示河南省周口市行政区划地图 2. 点击地图区域可切换到区县级别视图 3. 地图切换时带有平滑的过渡动画 4. 自定义地图样式和交互效果 5. 响应式布局适应不同屏幕尺寸 ## 技术栈 * Vue3（Composition API） * ECharts 5 * TypeScript * Canvas 图像处理 ## 核心功能实现 ### 1. 组件结构与依赖 ```html ``` ## 关键技术与优化点 ### 1. 平滑过渡动画实现通过以下配置实现地图切换时的平滑动画效果： ```javascript // 关键动画配置 universalTransition: { enabled: true, divideShape: 'clone' // 形状分割动画 }, animationDuration: 800, animationEasing: 'cubicOut', animationDurationUpdate: 800, animationEasingUpdate: 'cubicOut' ``` `universalTransition` 是 ECharts 5 引入的强大功能，它允许在数据更新时自动生成过渡动画，特别适合地理区域的切换。 ### 2. Canvas 动态图像处理使用 Canvas 动态生成带遮罩的背景图，实现区域高亮效果： ```typescript // 创建带遮罩的背景图 ctx.drawImage(img, 0, 0); // 绘制原图 ctx.fillStyle = maskColor; // 设置遮罩颜色 ctx.fillRect(0, 0, img.width, img.height); // 绘制遮罩层 ``` ### 3. 响应式布局处理 ```typescript // 动态计算地图容器高度 const parentHeight = mapChartRef.value.parentNode.offsetHeight; const siblingHeight = mapChartRef.value.previousSibling?.offsetHeight || 0; mapChartRef.value.style.height = `${parentHeight - siblingHeight - 16}px`; // 监听窗口大小变化 window.addEventListener('resize', () => { myChart?.resize(); }); ``` ### 4. 交互体验优化 * **层级导航**：只能从市级视图进入区县视图，防止无限深入 * **视觉反馈**：悬停和选中状态有明显样式变化 * **标题动态更新**：根据当前视图级别显示不同标题 * **性能优化**：使用 `false` 参数避免不必要的重绘 ```javascript myChart.setOption(getMapOption(e.name, maskedBgImg), false); ``` ## 使用示例 ### 在父组件中使用地图组件 ```html ``` ## 总结轻点骂，代码些的不是很好

河南省行政区划地图