先看看效果圖, 如果是你的菜 請往下看.
html 代碼
<template><div id="chineView"></div>
</template>
js代碼:
這邊注意的話是 world.json文件需要自己在網上資料下載一下.
<script
>
import * as echarts
from 'echarts/core';
import {use
} from 'echarts/core';
import { GeoComponent
} from 'echarts/components';
import {CanvasRenderer
} from 'echarts/renderers';
import { LinesChart
, EffectScatterChart
} from 'echarts/charts';
use([CanvasRenderer
,GeoComponent
,LinesChart
,EffectScatterChart
]);import datajson
from '../assets/world.json';echarts
.registerMap('world',datajson
);
var trackData
= [[{name: '北京',},{name: '莫斯科',icon: 'img_mosike.png',},],[{name: '北京',},{name: '重慶',icon: '',},],[{name: '北京',},{name: '香港',icon: '',},],[{name: '北京',},{name: '上海',icon: '',},],
];var geoCoordMap
= {北京: [116.4551, 40.2539],莫斯科: [37.623638, 55.752055],重慶: [106.644156, 29.72263],香港: [113.945136, 22.317638],上海: [121.813481, 31.156682],
};
export default {name:'',data(){return{planePath:'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',chineView: {backgroundColor: 'transparent',geo: {map: 'world',zoom: 1.3,label: {emphasis: {show: false,},},roam: true,itemStyle: {areaColor: '#16213e',borderColor: '#5b66a1',emphasis: {areaColor: '#2a333d',},},regions: [{name: 'China',itemStyle: {opacity: 0.4, borderColor: '#ffd591', borderWidth: 3, areaColor: '#485377', },},],},},}},methods: {coordinateData(data) {var res
= [];for (var i
= 0; i
< data
.length
; i
++) {var dataItem
= data
[i
];var fromCoord
= geoCoordMap
[dataItem
[0].name
];var toCoord
= geoCoordMap
[dataItem
[1].name
];if (fromCoord
&& toCoord
) {res
.push({fromName: dataItem
[0].name
,toName: dataItem
[1].name
,coords: [fromCoord
, toCoord
],});}}return res
;},},mounted() {var series
= [{name: 'china',type: 'lines',zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: '#fff',symbolSize: 3,},lineStyle: {color: '#a6c84c',width: 0,curveness: 0.2,},data: this.coordinateData(trackData
),},{name: 'track',type: 'lines',zlevel: 2,effect: {show: true,period: 6,trailLength: 0,symbol: this.planePath
,symbolSize: 15,},lineStyle: {color: '#a6c84c',width: 1,opacity: 0.4,curveness: 0.2,},data: this.coordinateData(trackData
),},{name: 'track',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke',},label: {show: true,position: 'right',formatter: '{b}',},symbol: function (val) {return 'image://./imgs/countryIcon/' + val
[2];},symbolSize: 15,itemStyle: {color: '#a6c84c',},data: trackData
.map(function (dataItem) {return {name: dataItem
[1].name
,value: geoCoordMap
[dataItem
[1].name
].concat([dataItem
[1].icon
]),};}),},];this.chineView
.series
= series
;this.myChart
= echarts
.init(document
.getElementById('chineView'));this.myChart
.setOption(this.chineView
);},
}
</script
>
world.json文件內容 前面的內容我截圖出來 大該也差不多是這樣子了:
我也嘗試過復制過來, 實在太長了 有18633代碼.
具體我也是賦值這個博主的 具體地址為: 地址1 謝謝這位博主
具體的版本我也貼出來, 以便后續怕有些版本實現不出來 .
"echarts": "^5.3.3",
如果能幫助到你的, 麻煩點個贊 . 謝謝!
學到的就要教人，賺到的就要給人。
總結
以上是生活随笔為你收集整理的echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
