echarts流向地图

### ECharts 流向地图使用教程

#### 准备工作
为了创建流向地图，需先安装并配置 `echarts` 库。可以通过 npm 或者 yarn 安装该库：

npm install echarts --save

或者

yarn add echarts

接着，在项目中引入必要的模块。

import * as echarts from 'echarts';

#### 加载地理坐标数据
对于流向地图而言，除了基本的地图轮廓外，还需要加载具体的地理位置信息以及流动路径的数据集。这些位置通常由经纬度表示，并通过 JSON 文件提供给图表引擎处理[^2]。

#### 初始化容器与实例化对象
在 HTML 中定义一个用于容纳图表的 DOM 元素，并设置其宽高样式以便于展示完整的地图视图。

<div id="main" style="width: 600px;height:400px;"></div>

随后初始化 ECharts 实例并与上述 div 关联起来。

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

#### 配置项设定
构建流向地图的核心在于正确地指定 series 类型为 `'lines'` 并传递相应的 data 属性来描述各个流线的具体情况。下面是一个简单的例子说明如何绘制从北京到上海之间的单一流动线条。

option = {
    backgroundColor: '#404a59',
    
    title: {
        text: 'ECharts 流向地图示例',
        subtext: '',
        top: 'top',
        left: 'center'
    },
    
    tooltip : {
        trigger: 'item'
    },

    geo: {
        map: 'china', // 使用内置的地图类型
        roam: true,
        emphasis: {
            areaColor: '#F3B329',
            borderColor: 'rgb(7,83,162)',
            itemStyle:{
                color:'#F3B329'
            }
        }
    },


    series: [
        {
            name: "流向",
            type: "lines", 
            coordinateSystem: 'geo',
            symbolSize: function (val) {return val;},
            effect: {
                show: true,
                period: 6,
                trailLength: 0.7,
                symbolSize: 3
            },            
            lineStyle: {
                normal: {
                    width: 0.5,
                    opacity: 0.6,
                    curveness: 0.2
                }
            },
            data:[
                {"fromName":"北京市","toName":"上海市","coords":[[116.46, 39.92], [121.48, 31.22]]}
            ]
        }        
    ]   
};
myChart.setOption(option);

此段代码设置了背景色、标题、提示框、地理区域样式等内容，并特别指定了系列中的 lines 来描绘具体的城市间连接关系及其视觉效果参数。