Echarts地图实现：杭州市困难人数分布【动画滚动播放】

usp1994

于 2024-06-28 11:27:29 发布

阅读量558

点赞数 7

分类专栏： echarts案例文章标签： echarts 前端 javascript 杭州地图

本文链接：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/140038620

版权

echarts案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Echarts地图实现：杭州市困难人数分布

实现功能

杭州市地区以及散点图分布结合的形式
数据展示动画轮播
可进去杭州市下级地区
可返回杭州市地图展示

效果预览

GIF 2024-6-28 11-02-59

实现思路

使用ECharts的地图和散点图功能结合实现地区分布
通过动画轮播展示数据变化
实现下级地区数据的展示与返回功能

关键代码

HTML结构

复制<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ECharts地图实现杭州困难人数</title>
  <style>
    .EChartBox {
      width: 1200px;
      height: 800px;
      position: relative;
    }
  </style>
</head>
<body>
<div id="ECharts" class="EChartBox"></div>
<script src="./jquery.min.js"></script>
<script src="./echarts.min.5.2.js"></script>
<script type="application/javascript">
  // JavaScript代码
</script>
</body>
</html>

JavaScript代码

window.onload = function () {
  // 初始化 ECharts 图表
  var myChart = echarts.init(document.getElementById('ECharts'));
  var hangzhouMap = "./hangzhou-map.json";

  // 地图数据初始化
  var mapAllData = [
    // 地图数据数组
  ];

  // 地图初始化函数
  function mapInit(currentName) {
    // 地图初始化逻辑
  }

  // 鼠标事件处理
  myChart.on('click', function (e) {
    // 点击事件逻辑
  });

  // 加载地图数据
  setTimeout(function () {
    mapInit();
  }, 1000);
};

样式与配置

设置地图的背景色、标题、提示框等
配置视觉映射（visualMap）来表示不同数量级的困难人数
配置地理坐标系（geo）和散点图（effectScatter）的样式

注意事项

确保地图数据文件hangzhou-map.json正确加载
根据实际数据调整mapAllData数组中的数据

完整代码和json文件

点我下载完整代码和json文件

usp1994

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts地图实现：杭州市困难人数分布【动画滚动播放】

使用ECharts实现杭州困难人数分布地图，结合地区与散点图，动态展示数据变化。支持进入下级区域并返回。预览包含动画效果。关键代码涉及地图初始化、数据加载及事件处理。需`hangzhou-map.json`数据文件。完整代码和资源见链接。
复制链接

扫一扫