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

javascript">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 <div ref={chartRef} style={{ width: "100%", height: "600px" }} />;
};export default WorldMap;

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

javascript">import React from "react";
import styles from "../styles/AfterSalesPage.module.css";
import WorldMap from "../components/WorldMap"; // 确保使用默认导入const AfterSales = () => {return (<div className={styles.newsContainer}><WorldMap /></div>);
};export default AfterSales;

成果展示：