前言

此系列共分為以下幾篇

《vue中高德地圖的使用》

《vue中基于高德的多行政區域覆蓋》

《vue中高德搭配echarts做數據遷徙流線圖》 (本篇)

本篇效果

流線遷徙.gif

實現步驟

1. 思路分析

第一篇的基礎講解，加上上一片的行政區域行政區域展示(描邊及背景)，其實可以完成很多炫酷效果了。本篇講述系列篇的最后一篇：vue中高德搭配echarts做數據遷徙流線圖。由于流線圖使用的曲線是貝塞爾曲線，而在高德中無法直接簡單粗暴的使用，想要完成此效果的話可能要進行一些算法操作才能完成該效果。在節約時間成本的條件下，找到了在echarts中完成該操作。簡單的說，就是用echarts的功能，搭配高德的經緯度當背景板，來完成此操作。

步驟分析

echarts安裝 引入

高德背景板設置(經緯度、中心點等)

掛載數據

2. 代碼分析

echarts安裝 引入

安裝：npm install echarts --save-dev

引入： main.js =>

// 全局掛載echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts;

高德背景板設置

在此中，可以自定義的調整一些關于地圖背景板的配置，如樣式、3D效果、旋轉、動畫等，在demo中有所注釋，自己根據需要配置即可。

// 加載 amap 組件

amap: {

// 高德地圖中心經緯度

center: [105.397428, 38.90923], //中心點

// 高德地圖縮放

zoom: 4,

// 啟用resize

resizeEnable: true,

// 自定義地圖樣式主題

mapStyle: "amap://xxxxxx", // 地圖主題 自己申請即可 我的是極夜藍主題

// viewMode:'3D',//開啟3D視圖,默認為關閉

// expandZoomRange:true,

// zooms:[3,20],

// pitch: 40

},

數據

此處寫了兩組數據，一組為flyLine代表流線數組，另一組為goals代表目標點。其中流線數據中坐標點有兩個，是起始和終點的經緯度坐標。如下所示：

data() {

return {

flyLine: [

{coords: [[116.496437,39.913523], [123.499706,41.857793]]},

{coords: [[116.496437,39.913523], [86.113232,43.684254]]},

{coords: [[116.496437,39.913523], [87.343701,35.720308]]},

{coords: [[116.496437,39.913523], [101.406201,24.177443]]},

{coords: [[116.496437,39.913523], [111.249951,24.976714]]},

{coords: [[116.496437,39.913523], [107.206982,33.843608]]},

{coords: [[116.496437,39.913523], [115.468701,43.557002]]},

{coords: [[116.496437,39.913523], [107.031201,37.134586]]},

{coords: [[116.496437,39.913523], [99.648388,38.522914]]},

{coords: [[116.496437,39.913523], [124.081982,49.361353]]},

],

goals: [

[123.499706,41.857793],

[86.113232,43.684254],

[87.343701,35.720308],

[101.406201,24.177443],

[111.249951,24.976714],

[107.206982,33.843608],

[115.468701,43.557002],

[107.031201,37.134586],

[107.031201,37.134586],

[99.648388,38.522914],

[124.081982,49.361353]

]

}

},

數據渲染

最后一步，其實是echarts的常規操作，可以配置流線、提示、流線背景、特效、效果、等等等等，依然是配置自己需要的即可，畢竟是搭配來的地圖，特效多了會影響性能～如下：

mapInit () {

let _this = this;

let option = {

// 加載 amap 組件

amap: {

// 高德地圖中心經緯度

center: [105.397428, 38.90923], //中心點

// 高德地圖縮放

zoom: 4,

// 啟用resize

resizeEnable: true,

// 自定義地圖樣式主題

mapStyle: "amap://styles/bfb1bb3feb0db7082367abca96b8d214", //地圖主題

// viewMode:'3D',//開啟3D視圖,默認為關閉

// expandZoomRange:true,

// zooms:[3,20],

// pitch: 40

},

tooltip: {

trigger: 'item',

show: false

},

animation: false,

series: [

// 流線

{

coordinateSystem: "amap", // 該系列使用的坐標系是高德地圖的坐標系

type: "lines", // 該類型用于地圖上路線的繪制

zlevel: 1, // 相當于z-index

effect: { // 線特效的配置

show: true, // 是否顯示特效

period: 5, // 特效動畫的時間

trailLength: 0.05, // 特效尾跡的長度 0-1

color: "#3437ff", // 特效的顏色

symbolSize: 5 // 特效的大小

},

lineStyle: { // 線的顏色

normal: {

color: "rgba(47,68,200,0.1)",

width: 2,

curveness: 0.2

}

},

data: _this.flyLine,

},

// 目標點

{

name: '目標點',

type: "scatter",

// 使用高德地圖坐標系

coordinateSystem: "amap",

// 數據格式跟在 geo 坐標系上一樣，每一項都是 [經度，緯度，數值大小，其它維度...]

data: _this.goals,

symbolSize: 3,

encode: {

value: 2

},

label: {

normal: {

formatter: '{b}',

position: 'right',

show: false

},

emphasis: {

show: true

}

},

itemStyle: {

normal: {

color: 'rgba(98,122,200,0.78)'

}

}

},

],

};

let chart = this.$echarts.init(_this.$refs.map);

chart.setOption(option);

},

至此，目的完成：

流線遷徙.png

剛才給源碼貼出來了，關注公眾號【流眸】回復【20617】獲取源碼喲~

總結

以上是生活随笔為你收集整理的echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。