在react中使用echarts地图（带攻击线）

最新推荐文章于 2025-05-28 15:33:08 发布

原创

最新推荐文章于 2025-05-28 15:33:08 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍如何在React项目中使用Echarts绘制带有攻击线的地图。通过示例代码展示了解决直接引入Echarts报错的问题，提供了一个实现地图攻击线效果的解决方案，并附有项目源代码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react中使用echarts地图（带攻击线）

项目源代码在这里：
https://gallery.echartsjs.com/editor.html?c=x9mmIwwZX8
所需导入的包

//可以按需引入
import React, { Component } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/visualMap';
import 'echarts/lib/chart/map';
import 'echarts/lib/chart/bar';
import 'echarts/map/js/china';
import { Modal, Table } from 'tinper-bee';
import sort from 'css-select/lib/sort';
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/gauge';
import 'echarts/lib/chart/pie';

react中部分代码如下：

var geoCoordMap = {
    '上海': [121.4648, 31.2891],
    '合肥': [117.29, 32.0581],
    '北京': [116.4551, 40.2539],
    '南京': [118.8062, 31.9208],
    };
var BJData = [
    [{
        name: '上海',
        value: 327
    }, {
        name: '南京'
    }],
];
var NJData = [
    [{
        name: '南京'
    }, {
        name: '上海',
        value: 327
    }],
];
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push([{
                coord: fromCoord,
                value: dataItem[0].value
            },
            {
                coord: toCoord
            }
            ]);
        }
    }
    return res;
};
var series = [];
[
    ["南京", BJData],
    ["南京", NJData]
]