vue echarts结合高德地图

效果图

一、安装插件

安装高德插件

npm install echarts-extension-amap --save

二、引入使用

（已全局引入echarts,高德地图）

import "echarts-extension-amap";
//echarts参数
options={amap:{// 高德地图中心经纬度center: [102.39, 24.9],// 高德地图缩放zoom: 4,// zooms: [4, 18], // 缩放比例范围// 启用resizeresizeEnable: true,// 移动过程中实时渲染 默认为true 如数据量较大 建议置为false// renderOnMoving: true,// 自定义地图样式主题// mapStyle: "amap://styles/4bd99152417f47683f35343cae76681c",mapStyle: "amap://styles/darkblue",},series:[{type: "effectScatter",coordinateSystem: "amap",rippleEffect: {brushType: "stroke",scale: 3,},label: {show: true,color: "#fff",position: "bottom",},symbolSize: 20,showEffectOn: "render", //加载完毕显示特效itemStyle: {normal: {color: "#FEBE13", // 圆点的颜色shadowBlur: 10,shadowColor: "#333",},},zlevel: 6,data: [],},]}

三、设置高德控件

在echarts setOption之后使用

// Get AMap extension component
var amapComponent = chart.getModel().getComponent('amap');
// Get the instance of AMap
var amap = amapComponent.getAMap();
// Add some controls provided by AMap.
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());

vue echarts结合高德地图相关推荐

如何在vue项目中使用echarts和高德地图绘制折线和热力图
1.先下载相关的依赖,这里echarts和高德地图放到一起.(高德地图需要先去申请一个key) // The Vue build version to load with the `import` c ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
Vue3 Echarts散点图+高德地图+卫星地图（一）——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
Vue引用原生高德地图标注
Vue引用原生高德地图标注一.引用高德? 首先在vue项目中的pubic下的index.html的head中引用. 二.在你的模板中设置一个div你的地图容器 <template>< ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
Vue中使用高德地图，简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...

vue echarts结合高德地图

一、安装插件

二、引入使用

三、设置高德控件

vue echarts结合高德地图相关推荐

最新文章

热门文章