高德地图+echarts实现飞线图
下面是vue实现,原生html后续贴上来前期准备:引入amap、echarts、echarts-amap依赖,vue的话需要npm安装一下By using script tag<!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.4.15&key=ab99f68b8f9eac7a5287f...
·
下面是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数组中多放几个值
更多推荐
已为社区贡献1条内容
所有评论(0)