React Next项目中导入Echart世界航线图

公司业务要求做世界航线图，跑了三个ai未果，主要是引入world.json失败，echart包中并不携带该文件，源码的world.json文件页面404找不到。需要自己寻找。这是整个问题卡壳的关键点，特此贴出资源网址。

一、安装

npm install echarts

二、下载world.json

world.json在最下面，点开直接粘贴到自己项目中引入

Index of /examples/data/asset/geo

三、创建地图组件WorldMap.js

import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";

const geoCoordMap = {
    "New York": [-74.0060, 40.7128],
    "London": [-0.1278, 51.5074],
    "Tokyo": [139.6917, 35.6895],
    "Beijing": [116.4074, 39.9092],
};

const SHData = [
    [{ name: "Beijing", value: 105 }, { name: "New York", value: 105 }],
    [{ name: "Beijing", value: 105 }, { name: "London", value: 105 }],
    [{ name: "Beijing", value: 105 }, { name: "Tokyo", value: 105 }],
];

const convertData = (data) => {
    const res = [];
    for (let i = 0; i < data.length; i++) {
        const dataItem = data[i];
        const fromCoord = geoCoordMap[dataItem[0].name];
        const toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord],
            });
        }
    }
    return res;
};

const WorldMap = () => {
    const chartRef = useRef(null);

    useEffect(() => {
        // 动态加载世界地图数据
        fetch("/world.json") // 确保文件路径正确，这里假设 world.json 放在 public 文件夹下
            .then((res) => res.json())
            .then((mapData) => {
                echarts.registerMap("world", mapData); // 注册地图数据

                const myChart = echarts.init(chartRef.current);

                const seriesData = [
                    {
                        type: "lines",
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0.7,
                            color: "#fff",
                            symbolSize: 3,
                        },
                        lineStyle: {
                            color: "#46bee9",
                            width: 0,
                            curveness: 0.2,
                        },
                        data: convertData(SHData),
                    },
                    {
                        type: "lines",
                        zlevel: 2,
                        symbol: ["none", "arrow"],
                        symbolSize: 10,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbol: "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
                            symbolSize: 15,
                        },
                        lineStyle: {
                            color: "#46bee9",
                            width: 1,
                            opacity: 0.6,
                            curveness: 0.2,
                        },
                        data: convertData(SHData),
                    },
                    {
                        type: "effectScatter",
                        coordinateSystem: "geo",
                        zlevel: 2,
                        rippleEffect: {
                            brushType: "stroke",
                        },
                        label: {
                            show: true,
                            position: "right",
                            formatter: "{b}",
                        },
                        symbolSize: (val) => val[2] / 8,
                        itemStyle: {
                            color: "#46bee9",
                        },
                        data: SHData.map((dataItem) => ({
                            name: dataItem[1].name,
                            value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]),
                        })),
                    },
                ];

                myChart.setOption({
                    geo: {
                        map: "world",
                        roam: true,
                        itemStyle: {
                            areaColor: "#404a59",
                            borderColor: "#61727a",
                        },
                        emphasis: {
                            itemStyle: {
                                areaColor: "#7acfd6",
                            },
                        },
                    },
                    series: seriesData,
                });
            })
            .catch((error) => {
                console.error("Failed to load world map data:", error);
            });
    }, []);

    return 
;
};

export default WorldMap;

四、引入地图组件到页面上

import React from "react";
import styles from "../styles/AfterSalesPage.module.css";
import WorldMap from "../components/WorldMap"; // 确保使用默认导入

const AfterSales = () => {
	return (
		

			
		
	);
};

export default AfterSales;

成果展示：