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

实现 Vue 中高德地图搭配 Echarts 迁徙图的步骤如下：

1. 安装依赖

npm install echarts vue-echarts vue-amap --save

2. 在 main.js 中引入依赖

import Vue from 'vue'
import VueAMap from 'vue-amap'
import ECharts from 'vue-echarts'

// 引入 ECharts 主题和扩展模块
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'

// 注册 ECharts 组件
Vue.component('v-chart', ECharts)

// 初始化高德地图插件
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '你的高德地图 api key',
  plugin: ['AMap.DragRoute']
})

3. 在组件中使用

<template>
  <div>
    <v-chart class="chart" :options="options" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: 'bottom',
          left: 'right',
          data: ['流入', '流出']
        },
        series: [
          {
            name: '迁徙',
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: '#fff',
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: '#a6c84c',
                width: 0,
                curveness: 0.2
              }
            },
            data: [
              {
                fromName: '北京',
                toName: '上海',
                coords: [
                  [116.407394, 39.904211],
                  [121.473662, 31.230372]
                ]
              },
              {
                fromName: '北京',
                toName: '广州',
                coords: [
                  [116.407394, 39.904211],
                  [113.280637, 23.125178]
                ]
              }
            ]
          },
          {
            name: '流入',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#009fe8',
                areaColor: '#fff'
              },
              emphasis: {
                areaColor: '#009fe8'
              }
            },
            data: [
              { name: '北京', value: 100 },
              { name: '上海', value: 200 },
              { name: '广州', value: 300 }
            ]
          },
          {
            name: '流出',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5,
                borderColor: '#009fe8',
                areaColor: '#fff'
              },
              emphasis: {
                areaColor: '#009fe8'
              }
            },
            data: [
              { name: '北京', value: 50 },
              { name: '上海', value: 100 },
              { name: '广州', value: 150 }
            ]
          }
        ]
      }
    }
  }
}
</script>

以上代码实现了一个简单的迁徙图，其中 `fromName` 和 `toName` 表示迁徙的起点和终点，`coords` 表示起点和终点的经纬度。`flowIn` 和 `flowOut` 表示流入和流出的数据，可以根据实际需求进行修改。