echarts绘制迁徙图

ECharts 是一个优秀的数据可视化库，它提供了许多绘图工具，包括迁徙图。下面是一个简单的迁徙图绘制实例：

1. 引入 ECharts 库和主题：

<!-- 引入 ECharts 库 -->
<script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
<!-- 引入 ECharts 主题 -->
<script src="https://cdn.staticfile.org/echarts/4.7.0/theme/macarons.js"></script>

2. 准备数据：

var geoCoordMap = {
    '上海': [121.4648, 31.2891],
    '北京': [116.4551, 40.2539],
    '深圳': [114.0728, 22.5529],
    // ...
};

var data = [
    { fromName: '上海', toName: '北京', value: 95 },
    { fromName: '上海', toName: '深圳', value: 90 },
    // ...
];

其中，`geoCoordMap` 是地理坐标系的城市坐标数据，`data` 是迁徙数据，包括起始城市、终点城市和迁徙人数。

3. 绘制地图：

var myChart = echarts.init(document.getElementById('main'), 'macarons');

myChart.setOption({
    tooltip: {
        trigger: 'item'
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [
        {
            name: '迁徙',
            type: 'lines',
            coordinateSystem: 'geo',
            data: convertData(data, geoCoordMap),
            // ...
        },
        {
            name: '起点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data, geoCoordMap, true),
            // ...
        },
        {
            name: '终点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data, geoCoordMap, false),
            // ...
        }
    ]
});

其中，`tooltip` 是提示框配置，`geo` 是地理坐标系配置，`series` 是系列配置。在系列中，`type:'lines'` 表示绘制线条，`type:'scatter'` 表示绘制点，`data` 是数据，`coordinateSystem` 表示坐标系类型。

4. 编写数据转换函数：

function convertData(data, geoCoordMap, isFrom) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoFrom = geoCoordMap[data[i].fromName];
        var geoTo = geoCoordMap[data[i].toName];
        if (geoFrom && geoTo) {
            res.push({
                fromName: data[i].fromName,
                toName: data[i].toName,
                coords: isFrom ? [geoFrom, geoTo] : [geoTo, geoFrom],
                value: data[i].value
            });
        }
    }
    return res;
}

这个函数用于将原始数据转换为 ECharts 所需的数据格式，其中，`isFrom` 表示是否为起点，`coords` 表示起点和终点的坐标。

最终效果如下所示：