echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行

先看看效果图, 如果是你的菜请往下看.

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飞行相关推荐

echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
Vue3 + Echarts 5 绘制带有立体感流线中国地图
本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm instal ...
【echarts 中国地图射线版本】vue实现中国地图航线动画效果，地图上添加散点效果【详细注释，通俗易懂】
先上效果图前置条件,必看首先你需要安装echarts并引入然后你需要下载china.json文件并注册引入,不然不生效当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...
echarts 绘制地图飞机路线
Tip: 在 ECharts 3 中不再建议在地图类型的图表使用 markLine 和 markPoint.如果要实现点数据或者线数据的可视化,可以使用在地理坐标系组件上的散点图和线图. 本来要画地图 ...
echarts+bmap（百度地图）的Demo
好开心!自己的小demo照亮了别人!所以我又来记录一下最近的一个需求! 捣鼓了一天,终于搞定了echarts结合百度地图,鉴于项目需求是基于html,非任何框架. 所以要下载资源js文件,用scrip ...
百度地图李东旻:中国地图行业最终只会剩下一两个玩家/阿里云CDN再降价25%
每一个企业级的人都置顶了中国软件网中国软件网为你带来最新鲜的行业干货小编点评应届生年薪30万干几年年薪80万还猎头主动找上门 AI行业这是得多缺人啊想想自己几千块的工资小编好想哭 ...
地图图表、柱状图、条形图、折线图、中国地图、世界地图、省市地图、仪表盘、雷达图、饼图、散点图、气泡图、瀑布图、堆叠图、热力图、桑基图、关系图、漏斗图、Axure原型、rp原型、产品原型
地图图表.柱状图.条形图.折线图.中国地图.世界地图.省市地图.仪表盘.雷达图.饼图.散点图.瀑布图.气泡图.堆叠图.热力图.桑基图.关系图.漏斗图.Axure原型.rp原型.产品原型.大屏设计必备组 ...

echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行

echarts 中国地图飞机实现demo 中国地图路线飞行 echarts飞行相关推荐

最新文章

热门文章