高德地图+echarts实现飞线图

下面是vue实现：

前期准备：

引入amap、echarts、echarts-amap依赖，vue的话需要npm安装一下
By using script tag

    <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.4.15&key=ab99f68b8f9eac7a5287f4043493e2db&plugin=AMap.CustomLayer"></script><!--引入UI组件库（1.0版本） --><script src="//webapi.amap.com/ui/1.0/main.js"></script><script src="//cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script><script src="echarts-amap.js"></script>

By using import in main.js（示例）

    import echarts from 'echarts'Vue.prototype.$echarts=echarts

By using webpack

    require('echarts-amap');

开始操作

    <template><div class="content-box"><!-- 通过vue的ref获取节点，方便初始化 --><!-- echart容器div必须设置高度，否则不显示 --><div ref="echart" style="height:745px;"></div></div></template><script>export default {mounted() {this.$nextTick(() => {this.initEchart();});},methods: {initEchart() {// 获取DOM节点并初始化let chart = this.$echarts.init(this.$refs.echart);// 编写echart参数let option = {amap: {zoom: 10,zooms: [3, 20],mapStyle: 'amap://styles/darkblue', // 地图主题center: [110, 33], // 中心点lang: 'en',resizeEnable: true},animation: false,series: []tooltip: { return: 'shanghai' }};// 设置图表的参数chart.setOption(option);}}};</script>

再在series里设置想要的飞线效果就可以了可以设置圆点，轨迹和轨迹路上闪动的线，参照echarts文档即可

html实现：

其实也很好理解，就是初始化echarts和amap渲染到div就可以
贴一个我参照的博客
参照博客地址http://blog.sqber.com/articles/echarts-with-gaode-map.html
如果想实现多条飞线的话可以自己设置对象从数据库传也可以在series配置项中的data数组中多放几个值

高德地图+echarts实现飞线图相关推荐

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 ...
地图飞线图 echart+高德地图实现
前提:其实这个东西已经做了很久了,但是因为昨天他突然不显示了,所以重新整了一下实现效果: 一.引入echart的两个js和高德地图  <scri ...
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
echart地图飞线图
echart中国地图飞线图(附加省份颜色自定义) 本文参考了模拟迁徙效果图 1.vue项目安装echart,vue-baidu-map:申请百度地图ak npm install echarts -- ...
echarts飞线图
简介在可视化大屏中碰到要绘制飞线图的需求,采用Echarts来实现,但是Echarts的世界地图数据会缺失部分数据,引入其他来源的话在网速不好的情况下地图瓦片加载又会很慢,体验感极差:最终通过改造E ...
echart制作出中国地图飞线图
先上图片参考内容:https://www.makeapie.com/editor.html?c=xm7FhEqj6w&v=2 这里直接展示代码,相关的图标,背景,大部分在代码中都做了注释(背 ...
高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue 高德地图+Echarts+Vue 先上效果图 1.创建后vue项目后下载echarts和高德地图插件 npm install amap-echarts n ...

高德地图+echarts实现飞线图

前期准备：

开始操作

高德地图+echarts实现飞线图相关推荐

最新文章

热门文章