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

在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;
};