xinkeaboard/xinkeaboard-admin/src/pages/statistics/bigscreen/components/WorldMap.js

import React from "react";
import * as echarts from "echarts";
import worldJson from "../world.json";
import topIcon from "../../../../assets/bigscreen/map-bar-head.svg";


class WorldMap2D extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chartInstance = null;
  }

  componentDidMount() {
    echarts.registerMap("world", worldJson); // 注册地图
    this.initChart();
    window.addEventListener("resize", this.resizeChart);
  }

  componentWillUnmount() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener("resize", this.resizeChart);
  }

  componentDidUpdate() {
    this.initChart();
  }

  resizeChart = () => {
    if (this.chartInstance) {
      this.chartInstance.resize();
    }
  };

  initChart() {
    if (!this.chartRef.current) return;
    this.chartInstance = echarts.init(this.chartRef.current);
    // 顶部图标数据，计算 y 偏移（柱子高度的一半）
    const topIconData = this.props.data.map((d) => {
      return {
        name: d.name,
        value: [d.value[0], d.value[1], d.value[2]], // 位置
        symbolOffset: [0, -d.value[2] / 2 * 30 ], // Y轴偏移（柱子高度一半 + 额外10像素）
      };
    });
    const option = {
      tooltip: {
        formatter: (params) => {
          return `${params.name} <br/>${params.value[2]}`;
        },
        textStyle: {
          fontSize: 20,
          fontWeight: "bold",
        },
      },
      geo: {
        map: "world",
        roam: true, // 支持缩放拖拽
        zoom: 1.1,
        itemStyle: {
          areaColor: "rgba(126, 206, 244, 0.1)",
          borderColor: "#2EA7E0",
          borderWidth: 2,
        },
        emphasis: {
          itemStyle: {
            areaColor: "rgba(41, 241, 250, 0.6)", // 悬浮时高亮色
            borderWidth: 1,
            borderColor: 'rgba(41, 241, 250, 1)',
            shadowColor: "rgba(41, 241, 250, 1)",  // 阴影颜色
            // shadowColor: '#fff',
            shadowBlur: 2,  
            shadowOffsetX: 10,               // X 偏移
            shadowOffsetY: -10,     
          },
        },
      },
      series: [
        {
          type: "scatter",
          coordinateSystem: "geo",
          symbol: "rect", // 用矩形柱代替点
          symbolSize: (val) => {
            const height = val[2] * 30;
            return [10, height];
          },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#EC903A" },
                { offset: 1, color: "rgba(18,92,178,0)" },
              ],
            },
            shadowColor: "#4fd2dd",
            shadowBlur: 10,
            borderRadius: [8, 8, 0, 0],
          },
          encode: { tooltip: 2 }, // 提示框显示 value[2]
          data: this.props.data, // [lng, lat, value]
        },
        {
          type: "scatter",
          coordinateSystem: "geo",
          symbol: `image://${topIcon}`, // 图片 URL
          symbolSize: [15, 15], // 图片大小
          data: topIconData,
        },
      ],
    };

    this.chartInstance.setOption(option);
  }

  render() {
    return (
      <div ref={this.chartRef} style={{ width: "100%", height: "100%" }} />
    );
  }
}

export default WorldMap2D;