Echarts 飞线图

地图数据
https://datav.aliyun.com/portal/school/atlas/area_selector
不会下载的同学用这个吧「chinaMap.js」https://www.aliyundrive.com/s/qsD9qm8sJsG
点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。
这个是全国和省份具体的数据. 使用的时候只要注册地图的时候采用省份数据就可以了 https://note.youdao.com/s/SOTIz65r
echarts社区
https://www.makeapie.cn/echarts
https://www.isqqw.com/#/homepage
http://www.ppchart.com/#/

<template><el-card style="height: 100%"><div ref="myChart" id="chart"></div></el-card>
</template>
<!--飞线地图-->
<script>
import echarts from 'echarts';
// 中国地图数据
import {chinaData} from "@/assets/js/chinaMap";export default {name: "CenterMap",data() {return {flyLineList: [],pointList: [],myChart: null,}},mounted() {this.myChart = echarts.init(this.$refs.myChart);// 注册中国地图echarts.registerMap("chinaMap", chinaData);this.init();},methods: {// 获取飞线数据async search() {return await this.$http({url: "/mas/home/centerMap",method: "get",});},init() {this.myChart.showLoading();this.search().then(({data}) => {if (data && data.success) {this.myChart.setOption({geo: {type: "map",// 使用mount注册的地图数据map: "chinaMap",// 地图平移效果roam: true,// 初始化地图比例zoom: 1.5,aspectScale: 1, //长宽比// 缩放比例scaleLimit: {min: 1,max: 5,},// 中心坐标center: [108.948024,34.263161],// 显示城市名称label: {show: true,},// 区域颜色itemStyle: {areaColor: "rgba(0, 168, 255,0.5)",// 地图层次感/*                normal: {shadowOffsetX: 2,shadowOffsetY: 2,},*/}},series: [// 点{// 采用涟漪点type: "effectScatter",// 坐标采用经纬度coordinateSystem: "geo",// 涟漪点大小symbolSize: 5,// 涟漪效果rippleEffect: {number: 2,scale: 3},// 涟漪点颜色itemStyle: {color:"#ea9090"},// 在哪里绘制涟漪点data: [{name:"重庆",value: [108.384366, 30.439702]},{name:"山东",value: [117.1582, 36.8701]},]},// 连接点的线{name: '线路',type: 'lines',// 坐标采用经纬度coordinateSystem: 'geo',large: true,zlevel: 10,effect: {show: true,color:"#abcd11",period: 10, //箭头指向速度，值越小速度越快trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'diamond', //箭头图标symbolSize: 7, //图标大小},lineStyle: {normal: {color: "#0FD1D9",// 线条宽度width: 0.2,opacity: 1,curveness: 0.3,}},label: {normal: {show: false,position: 'middle',formatter: '{b}'}},data: [{fromName: "重庆",toName:"山东",coords:[[108.384366, 30.439702],[117.1582, 36.8701]]},],},]})// 自适应this.$nextTick(() => {this.$emit("add", this.myChart);})}}).finally(() => {this.myChart.hideLoading();})}}
}
</script>

Echarts 飞线图相关推荐

echarts飞线图
简介在可视化大屏中碰到要绘制飞线图的需求,采用Echarts来实现,但是Echarts的世界地图数据会缺失部分数据,引入其他来源的话在网速不好的情况下地图瓦片加载又会很慢,体验感极差:最终通过改造E ...
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 飞线图

Echarts 飞线图相关推荐

最新文章

热门文章