echarts飞线图

简介

在可视化大屏中碰到要绘制飞线图的需求，采用Echarts来实现，但是Echarts的世界地图数据会缺失部分数据，引入其他来源的话在网速不好的情况下地图瓦片加载又会很慢，体验感极差；最终通过改造Echarts地图数据实现了如下效果:

详细代码如下

引入Api

import echarts from 'echarts';
// 世界地图数据（更改后的JSON数据）
import world from './geojson/world.json'

开始使用

初始化Echarts

 // 注册世界地图数据echarts.registerMap('world', world)// 初始化let chartDom = document.getElementById('main')if(this.myChart != null && this.myChart != '' && this.myChart != undefined) {this.myChart.dispose()}this.myChart = echarts.init(chartDom)

创建配置项

 // 小飞机图标let 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';// 线路坐标（模拟数据）let LineData = [{'fromName': '加拿大温哥华','toName': '咸阳国际机场','coords': [[-123.023921,49.311753],[108.76463,34.44212]],value: 123},]
// 线路起点坐标
let LineEffectScatterData = []
// 线路终点坐标
let effectScatterData = []
LineData.map((item) => {// 线路起点坐标let objStart = {name: item.fromName,value: item.coords[0]}LineEffectScatterData.push(objStart)// 线路终点坐标let objEnd = {name: item.toName,value: item.coords[1]}effectScatterData.push(objEnd)
})
let series = [];
series.push({type: 'lines',zlevel: 2,effect: {show: true,//飞机的速度  这里是s单位period: 6,trailLength: 0,symbol: planePath,// 飞机大小symbolSize: 16,color:'#ff8800',},lineStyle: {normal: {color:'#8A91BA',type:'dashed', // 虚线// 线条宽度width: 2,opacity: 1,curveness: 0.2, // 弯曲度},emphasis: {color: '#FF9600' //飞线悬浮颜色}},label: {normal: {show: false,position: 'middle',formatter: '{b}'}},data: LineData}, {type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {//涟漪特效period: 4, //动画时间，值越小速度越快brushType: 'stroke', //波纹绘制方式 stroke, fillscale: 4 //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: false,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: '{b}', //圆环显示文字textStyle: {color: 'red'}},// emphasis: {//     show: true// }},symbol: 'circle',symbolSize: function(val) {return 10; //圆环大小},itemStyle: {normal: {show: false,color: '#E0C896',}},data: LineEffectScatterData},//终点{type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {period: 4,brushType: 'stroke',scale: 4},label: {normal: {show: false,position: 'right', //显示位置offset: [5, 0], //偏移设置formatter: '', //圆环显示文字},emphasis: {show: true}},symbol: 'circle',symbolSize: function(val) {return 10; //圆环大小},itemStyle: {normal: {show: true,color: '#FF9300',}},data: effectScatterData}
);let option;
option = {backgroundColor: 'rgba(0,0,0,0)',tooltip: {trigger: 'item',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'rgba(0,0,0,0)',padding: 0,formatter: function(params, ticket, callback) {if (params.seriesType == 'effectScatter') {// 这里可根据自己需要自定义// 起点终点悬浮效果return params.marker+params.data.name;} else if (params.seriesType == 'lines') {// 这里可根据自己需要自定义// 飞线悬浮效果return params.data.fromName + ' -> ' + params.data.toName + '<br />' + params.data.value;}return params.name;},},geo: {map: 'world',label: {emphasis: {show: false}},roam: true, //是否允许缩放scaleLimit: { //滚轮缩放的极限控制min: 1,max: 3},layoutCenter: ['50%', '52%'], //地图位置layoutSize: '130%',itemStyle: {normal: {color: '#6073ae', //地图背景色borderColor: '#6073ae' //省市边界线},emphasis: {color: '#6073ae' //悬浮背景}},// 设置中国地图边界线regions: [{name: 'China',itemStyle: {normal: {borderColor: '#fedc70',borderWidth: 1,areaColor: '#6073ae',// shadowColor: 'rgba(128, 217, 248, 1)',// shadowColor: 'rgba(255, 255, 255, 1)',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 0},emphasis: {color: '#6073ae' //悬浮背景}}}]},series: series
};

加载配置

 option && this.myChart.setOption(option);window.addEventListener('resize', () => {this.myChart.resize()})

地图颜色等配置可自行修改为所需的配置
所需要的world.json文件可在博主资源下载中心自行下载
欢迎指正交流

echarts飞线图相关推荐

Echarts 飞线图
地图数据 https://datav.aliyun.com/portal/school/atlas/area_selector 不会下载的同学用这个吧「chinaMap.js」https://www. ...
echarts切换飞线图未清空_echarts做飞线图
飞线图 height:100%; } body{ height:100%; margin:0; padding:0; background-color:#2F4056; } const xhr= ne ...
ECharts+高德卫星地图-飞线图效果
ECharts+高德地图实现卫星地图-飞线图加载资源: https://webapi.amap.com/maps?v=1.4.15&key=申请Key(高德开放平台申请key) echart ...
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
echart地图飞线图
echart中国地图飞线图(附加省份颜色自定义) 本文参考了模拟迁徙效果图 1.vue项目安装echart,vue-baidu-map:申请百度地图ak npm install echarts -- ...
地图飞线图 echart+高德地图实现
前提:其实这个东西已经做了很久了,但是因为昨天他突然不显示了,所以重新整了一下实现效果: 一.引入echart的两个js和高德地图  <scri ...
Vue数据可视化组件库，类阿里DataV，提供SVG的边框及装饰，图表，飞线图等组件，简单易用，持续更新...
由于阿里DataV收费,接口维护略有麻烦,同时也基于兴趣和学习,自己从依赖到组件独立开发了一个组件库,从效果上跟阿里的DataV很像. 主要的组件类型 SVG的边框,主要用于提升页面效果,一个边框组件 ...
echart制作出中国地图飞线图
先上图片参考内容:https://www.makeapie.com/editor.html?c=xm7FhEqj6w&v=2 这里直接展示代码,相关的图标,背景,大部分在代码中都做了注释(背 ...
d3.js-V3制作简单的飞线图
d3.js制作简单的飞线图简介期末的一个小作业,放上来分享一下.若有不懂的地方欢迎在评论区提问~ 最终效果图: 使用工具 d3.js (V3版本) 步骤简介准备好数据. 绘制一个中国地图. 绘制 ...

echarts飞线图

简介

引入Api

开始使用

echarts飞线图相关推荐

最新文章

热门文章