echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图

首先，需要在 Vue 项目中引入 ECharts 和高德地图的相关库。可以使用 cdn 引入，也可以使用 npm 安装后引入。

然后，在 Vue 组件中使用 ECharts 实例来创建迁徙图。以下是一个简单的示例：

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

<script>
import echarts from 'echarts'
import 'echarts-gl'
import 'echarts/map/js/china'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  mounted() {
    AMapLoader.load({
      key: 'your amap key',
      version: '2.0',
      plugins: ['AMap.ToolBar']
    }).then(() => {
      const chart = echarts.init(document.getElementById('main'))
      chart.setOption({
        tooltip: {},
        geo: {
          map: 'china',
          roam: true,
          zoom: 1.2,
          itemStyle: {
            areaColor: '#fff',
            borderColor: '#666'
          }
        },
        series: [
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: '#fff',
              symbolSize: 3
            },
            lineStyle: {
              color: '#a6c84c',
              width: 0,
              curveness: 0.2
            },
            data: [
              {
                fromName: '北京',
                toName: '上海',
                coords: [
                  [116.46, 39.92],
                  [121.48, 31.22]
                ]
              },
              {
                fromName: '北京',
                toName: '广州',
                coords: [
                  [116.46, 39.92],
                  [113.23, 23.16]
                ]
              }
            ]
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{b}'
            },
            symbolSize: 5,
            itemStyle: {
              color: '#a6c84c'
            },
            data: [
              {
                name: '北京',
                value: [116.46, 39.92]
              },
              {
                name: '上海',
                value: [121.48, 31.22]
              },
              {
                name: '广州',
                value: [113.23, 23.16]
              }
            ]
          }
        ]
      })
    })
  }
}
</script>

其中，`AMapLoader` 是高德地图 JavaScript API Loader 的封装库，用于异步加载高德地图的相关资源。需要在 `mounted` 钩子函数中使用 `AMapLoader.load` 方法加载高德地图，并在回调函数中创建 ECharts 实例和设置迁徙图的配置项。

具体的配置项可以根据需要进行调整，例如：

- `geo` 配置项用于设置地理坐标系组件，其中 `roam` 参数设置为 `true` 表示开启地图的缩放和拖拽功能，`zoom` 参数设置为 `1.2` 表示地图的初始缩放级别。
- `series` 中的第一个系列是 `lines`，用于绘制迁徙流线，其中 `data` 数组中每个元素表示一条迁徙线路，包括起点、终点和经过的坐标点。
- `series` 中的第二个系列是 `scatter`，用于绘制城市的散点图，其中 `data` 数组中每个元素表示一个城市的坐标点。

需要注意的是，由于 ECharts 组件默认使用 Canvas 渲染，而高德地图使用的是 SVG 渲染，因此在使用 ECharts 绘制迁徙图时，需要将 ECharts 中的渲染引擎改为 WebGL 或者 ECharts GL。