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

前言

此系列共分为以下几篇

《vue中高德地图的使用》

《vue中基于高德的多行政区域覆盖》

《vue中高德搭配echarts做数据迁徙流线图》 (本篇)

本篇效果

实现步骤

1. 思路分析

第一篇的基础讲解，加上上一片的行政区域行政区域展示(描边及背景)，其实可以完成很多炫酷效果了。本篇讲述系列篇的最后一篇：vue中高德搭配echarts做数据迁徙流线图。由于流线图使用的曲线是贝塞尔曲线，而在高德中无法直接简单粗暴的使用，想要完成此效果的话可能要进行一些算法操作才能完成该效果。在节约时间成本的条件下，找到了在echarts中完成该操作。简单的说，就是用echarts的功能，搭配高德的经纬度当背景板，来完成此操作。

步骤分析

echarts安装 引入

高德背景板设置(经纬度、中心点等)

挂载数据

2. 代码分析

echarts安装 引入

安装： npm install echarts--save-dev

引入： main.js =>

// 全局挂载echarts

importecharts from'echarts'

Vue.prototype.$echarts=echarts;

高德背景板设置

在此中，可以自定义的调整一些关于地图背景板的配置，如样式、3D效果、旋转、动画等，在demo中有所注释，自己根据需要配置即可。

// 加载 amap 组件

amap