从零开始：React+ECharts动态地理数据可视化

ECharts是由百度开源的一款基于JavaScript的数据可视化库，专为Web开发者设计，用于构建交互式图表和大屏数据展示，作为开发者，我们只需要修改配置属性就可以实现图标的高效展示。

引入

js 复制代码

npm install --save echarts-for-react

npm install --save echarts
// 3d地图会用到的插件
npm install --save echarts-gl

获取地理数据GEO

从以下网站可以获取geo数据，用于我们在echarts中展示。 DataV.GeoAtlas地理小工具系列

获取下载下来的geojson,存储在项目目录中。例如：

上代码

js 复制代码

import React from "react";
import ReactECharts from "echarts-for-react";
import chinaGeoJSON from "../../public/map_data/map.json";
import * as echarts from "echarts";
import "echarts-gl";

export default function ScreenPage() {
  echarts.registerMap("chinatmp", chinaGeoJSON);

  return (
    <div>
      <section
        className="relative p-4 bg-gray-900"
        style={{
          width: "100%",
          height: "100vh",
          position: "fixed",
          top: 0,
          left: 0,
        }}
      >
        {/* 3D 地图容器 */}
        <div className="absolute inset-0" id="map-container">
          <ReactECharts
            option={{
              series: [
                {
                  type: "map3D",
                  map: "chinatmp",
                  viewControl: {
                    projection: "perspective",
                    distance: 70,
                    zoomSensitivity: 0.8,
                    minDistance: 30,
                    maxDistance: 150,
                    alpha: 30,
                    beta: 15,
                    center: [0, 0, 0],
                    animationDurationUpdate: 300, // 减少动画时间
                    damping: 0.2,
                  },
                  performance: {
                    // 添加性能监控
                    showFPS: true, // 显示帧率
                    showRenderTime: true, // 显示渲染时间
                  },
                  progressiveThreshold: 5000, // 大数据量分块加载
                  postEffect: {
                    bloom: {
                      intensity: 0.6, // 降低辉光强度
                    },
                    SSAO: {
                      radius: 1.5, // 缩小环境光遮蔽范围
                      intensity: 1.2,
                    },
                  },
                  itemStyle: {
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   { offset: 0, color: '#00ffff' },
                    //   { offset: 1, color: '#0000ff' }
                    // ]),
                    color: "#286ECA", // 地图板块的颜色
                    opacity: 1, // 图形的不透明度 [ default: 1 ]
                    borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
                    borderColor: "#333", // 图形描边的颜色。[ default: #333 ]
                  },
                  label: {
                    show: true, // (地图上的城市名称)是否显示标签
                    distance: 10,
                    formatter: function (params) {
                      return params.name ? params.name : " ";
                    },
                    textStyle: {
                      // 标签的字体样式
                      color: "#fff", // 地图初始化区域字体颜色
                      fontSize: 15, // 字体大小
                    },
                  },
                  emphasis: {
                    label: {
                      // label 高亮时的配置
                      show: true,
                      textStyle: {
                        color: "#fff", // 高亮时标签颜色变为 白色
                        fontSize: 15, // 高亮时标签字体 变大
                      },
                    },
                    itemStyle: {
                      // itemStyle 高亮时的配置
                      color: "#66ffff", // 高亮时地图板块颜色改变
                    },
                  },
                  environment: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        // 配置为垂直渐变的背景
                        offset: 0,
                        color: "#183890", // 天空颜色
                      },
                      {
                        offset: 0.7,
                        color: "#040829", // 地面颜色
                      },
                      {
                        offset: 1,
                        color: "#040829", // 地面颜色
                      },
                    ],
                    false
                  ),
                  light: {
                    main: {
                      color: "#3D94CE", // 改为冷色调主光源
                      intensity: 2.5, // 增强光照强度
                      shadow: true, // 启用阴影
                      shadowQuality: "ultra",
                      alpha: 65, // 调整光源角度
                      beta: -25,
                    },
                    ambient: {
                      color: "#4b0082", // 紫色环境光增强神秘感
                      intensity: 1.2,
                    },
                  },
                },
              ],
              tooltip: {
                trigger: "item",
                position: "inside",
                formatter: "{b}",
                backgroundColor: "rgba(50, 50, 50, 0.7)",
                textStyle: {
                  color: "#FFFFFF",
                  textalign: "center",
                  fontSize: "12px",
                },
              },
            }}
            style={{ height: "100%", width: "100%" }}
          />
        </div>
      </section>
    </div>
  );
}

就是一堆配置，来实现美化效果，大家可以参考调整。

怎么拼接多个省份到同一张地图

多个省份怎么展现在一张地图中呢，就需要将不同geo数据拼接到一起。 geojson.io | powered by Mapbox 打开很慢。使用这个工具，Open多个json就可以将不同的geojson拼接到一起，然后粘贴出去即可。