Vue Echarts飞机航线图

声明本案例来着官方案例航线图

效果图

步骤

①：文件导入
②：基本配置
③：图标配置
④：生成结果

①：文件导入

    <script src="../../js/echarts.min.js"></script><script src="../../js/china.js"></script><script src="../../js/vue.js"></script>

②：基本配置

let kinghiee=new Vue({el:"#line",methods:{loca(){}，createLine(seriesData){let myChart = echarts.init(document.getElementById('airLine'));myChart.setOption({backgroundColor:"#404a59",//设置整体背景色title : {//标题设置text: 'airLine',left: 'center',textStyle: {color: '#fff',fontFamily:"Monospace",fontWeight:"lighter"},},geo:{//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。map: 'china',//配置中国地图roam:true,//是否开启鼠标缩放和平移漫游itemStyle:{areaColor: '#323c48',//设置区域颜色borderColor: '#404a59'//设置各各省市边界颜色},emphasis:{show: true,itemStyle: {areaColor: '#2a333d'}}},series: seriesData})}},}mounted(){this.createLine(this.loca());}})

③：图标配置

输入数据

 data:{SHData :[//这是两地的数据[{name:'上海'},{name:'包头',value:95}],[{name:'上海'},{name:'昆明',value:90}],[{name:'上海'},{name:'广州',value:80}],[{name:'上海'},{name:'郑州',value:70}],[{name:'上海'},{name:'长春',value:60}],[{name:'上海'},{name:'重庆',value:50}],[{name:'上海'},{name:'长沙',value:40}],[{name:'上海'},{name:'北京',value:30}],[{name:'上海'},{name:'丹东',value:20}],[{name:'上海'},{name:'大连',value:10}]],geoCoordMap :{//地理坐标'上海': [121.4648,31.2891],'丹东': [124.541,40.4242],'包头': [110.3467,41.4899],'北京': [116.4551,40.2539],'大连': [122.2229,39.4409],'广州': [113.5107,23.2196],'重庆': [107.7539,30.1904],'郑州': [113.4668,34.6234],'长沙': [113.0823,28.2568],'长春': [125.8154,44.2584],'昆明': [102.9199,25.4663],},//飞机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',},

配置线条

methods:{loca(){let  series=[];[['上海',this.SHData]].forEach((item, i) =>{//console.log(item[1]);//得到上海数组series.push({type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。zlevel: 1,effect: {//线特效的配置show: true,period: 6,//特效动画的时间trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。color: '#fff',symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。},lineStyle: {normal: {color: '#46bee9',width: 0,curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大}},data: this.convertData(item[1])//线数据集。},{type: 'lines',zlevel: 2,symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: this.planePath,symbolSize: 15},lineStyle: {color: '#46bee9',width: 1,opacity: 0.6,curveness: 0.2},data: this.convertData(item[1])},{type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。coordinateSystem: 'geo',//该系列使用的坐标系zlevel: 2,rippleEffect: {//涟漪特效相关配置brushType: 'stroke'},label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等show: true,position: 'right',formatter: '{b}'},symbolSize: function (val) {//标记的大小return val[2] / 8;},itemStyle: {color:  '#46bee9'},data: item[1].map((dataItem)=> {return {name: dataItem[1].name,value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});return series;},

数据的坐标转换

 convertData(data) {var res = [];//console.log(data.length);长度为10for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地var toCoord = this.geoCoordMap[dataItem[1].name];//目的地if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。});}}return res;},

④：生成结果

总代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Kinghiee-航线图</title><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=5,user-scalable=yes" /><meta name="format-detection" content="telephone=no,email=no"/><link rel="icon" type="image/x-icon" href="../../img/favicon.ico"><script src="../../js/echarts.min.js"></script><script src="../../js/china.js"></script><script src="../../js/vue.js"></script><style>*{margin: 0;}html,body,#line,#airLine{height: 100%;}</style>
</head>
<body>
<div id="line"><div id="airLine"></div>
</div>
<script>let kinghiee=new Vue({el:"#line",data:{SHData :[[{name:'上海'},{name:'包头',value:95}],[{name:'上海'},{name:'昆明',value:90}],[{name:'上海'},{name:'广州',value:80}],[{name:'上海'},{name:'郑州',value:70}],[{name:'上海'},{name:'长春',value:60}],[{name:'上海'},{name:'重庆',value:50}],[{name:'上海'},{name:'长沙',value:40}],[{name:'上海'},{name:'北京',value:30}],[{name:'上海'},{name:'丹东',value:20}],[{name:'上海'},{name:'大连',value:10}]],geoCoordMap :{'上海': [121.4648,31.2891],'丹东': [124.541,40.4242],'包头': [110.3467,41.4899],'北京': [116.4551,40.2539],'大连': [122.2229,39.4409],'广州': [113.5107,23.2196],'重庆': [107.7539,30.1904],'郑州': [113.4668,34.6234],'长沙': [113.0823,28.2568],'长春': [125.8154,44.2584],'昆明': [102.9199,25.4663],},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',},methods:{loca(){let  series=[];[['上海',this.SHData]].forEach((item, i) =>{//console.log(item[1]);//得到上海数组series.push({type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。zlevel: 1,effect: {//线特效的配置show: true,period: 6,//特效动画的时间trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。color: '#fff',symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。},lineStyle: {normal: {color: '#46bee9',width: 0,curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大}},data: this.convertData(item[1])//线数据集。},{type: 'lines',zlevel: 2,symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: this.planePath,symbolSize: 15},lineStyle: {color: '#46bee9',width: 1,opacity: 0.6,curveness: 0.2},data: this.convertData(item[1])},{type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。coordinateSystem: 'geo',//该系列使用的坐标系zlevel: 2,rippleEffect: {//涟漪特效相关配置brushType: 'stroke'},label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等show: true,position: 'right',formatter: '{b}'},symbolSize: function (val) {//标记的大小return val[2] / 8;},itemStyle: {color:  '#46bee9'},data: item[1].map((dataItem)=> {return {name: dataItem[1].name,value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});return series;},convertData(data) {var res = [];//console.log(data.length);长度为10for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = this.geoCoordMap[dataItem[0].name];//始发地var toCoord = this.geoCoordMap[dataItem[1].name];//目的地if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。});}}return res;},createLine(seriesData){let myChart = echarts.init(document.getElementById('airLine'));myChart.setOption({backgroundColor:"#404a59",//设置整体背景色title : {//标题设置text: 'airLine',left: 'center',textStyle: {color: '#fff',fontFamily:"Monospace",fontWeight:"lighter"},},geo:{//地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。map: 'china',//配置中国地图roam:true,//是否开启鼠标缩放和平移漫游itemStyle:{areaColor: '#323c48',//设置区域颜色borderColor: '#404a59'//设置各各省市边界颜色},emphasis:{show: true,itemStyle: {areaColor: '#2a333d'}}},series: seriesData})}},mounted(){this.createLine(this.loca());}});
</script>
</body>
</html>

效果访问Kinghiee

Vue Echarts飞机航线图相关推荐

echarts 渲染航线图
1.需求:根据数据渲染航线图通过vue+echarts 实现过程中遇到bug:切换数据时,浏览器出现崩溃,原因是将echarts 实例定义在了vue的data 中需要将echarts 实例定在s ...
浅谈 leaflet 地图插件的使用（制作飞机航线图）
前沿接到需求飞行航班地图需求整理 1.获取后台接口数据,且定时请求数据并渲染,体现航班的动态效果 2.在地图上分布给每组数据设同样的图标 3.给循环的marker设置鼠标事件(移入移出样式设置), ...
vue+echarts画甘特图
vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js ...
Vue Echarts 河南省疫情图
效果图代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
vue+echarts封装日历图
前端可视化封装日历图 html <template><divref="calendar":style="{ width: `${width}px`, h ...
vue+echarts饼状图中间计算总数
饼状图中间显示总数值,效果图如下: dom结构: <div class="chart1" ref="chart1" style="width: ...
关于怎么在echarts飞机迁移图中换掉飞机图标
其实这个在API文档中也有写到,但也是花费我一些时间修改的,所以就小小的记录下: 官方的例子显示的迁移图: 然后我们可以在js代码中找到以下代码: var planePath = 'path://M1 ...
vue echarts 三维折线图
效果图: <template><div id="main" style="width: 900px;height: 600px">< ...
Vue Echarts风向折线图拐点生成
风向拐点生成准备一个向下的风向箭头如下: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAZCAYAAAA8CX6UAAAAAXNSR0I ...
echarts5.0引入地图，背景渐变色，航线图，地图阴影
效果图如下,文章末尾附全部代码: 参考: 1.航线图 Vue Echarts飞机航线图_Kinghiee的博客-CSDN博客 2.地图阴影 echarts中国地图实现阴影效果&自定义设置_K ...

Vue Echarts飞机航线图

效果图

步骤

①：文件导入

②：基本配置

③：图标配置

④：生成结果

Vue Echarts飞机航线图相关推荐

最新文章

热门文章