echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言
此系列共分為以下幾篇
《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: '',
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做数据迁徙流线图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python字符串注释_python字符
- 下一篇： 统计各个函数的耗时_Prometheus