echarts结合amap (echarts-extension-amap)

网上高德结合echarts资源太少了，有的还需要下载收费，自己踩了好多坑，最终实现了，我把这整理成文档，

一、是为了自己把知识记录下来

二、是为了方便别人尽量少总弯路

实现效果

安装

npm install echarts-extension-amap --save

首先

在index.vue页面引入高德api

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>大数据平台</title><script src="./static/js/ezuikit.js"></script><script src="https://webapi.amap.com/maps?v=2.0&key=XXX&plugin=AMap.PolygonEditor"></script></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

地图页面

import echarts from "echarts";
import "echarts-extension-amap";
export default {data() {return {linesData: {saddr: {name: "潼江河谷优质粮油现代农业园区",fromCoord: ["105.171696", "31.780457"],},eaddr: [{area: "苏仙区",province: "湖南省",detailaddr: "湖南省郴州s市",city: "郴州市",total: "1200000",eaddr: "113.082857,25.698858",name: "湖南省",value: "1200000",toCoord: ["113.082857", "25.698858"],},{area: "南昌县",province: "江西省",detailaddr: "江西省南昌是南昌县",city: "南昌市",total: "12000",eaddr: "115.835552,28.557603",name: "江西省",value: "12000",toCoord: ["115.835552", "28.557603"],},{area: "武侯区",province: "四川省",detailaddr: "成都市武侯区",city: "成都市",total: "1448200",eaddr: "104.07853,30.558076",name: "四川省",value: "1448200",toCoord: ["104.07853", "30.558076"],},{area: "涪城区",province: "四川省",detailaddr: "绵阳市龙门镇",city: "绵阳市",total: "2400000",eaddr: "104.689665,31.479566",name: "四川省",value: "2400000",toCoord: ["104.689665", "31.479566"],},{area: "双流区",province: "四川省",detailaddr: "成都市双流",city: "成都市",total: "1206000",eaddr: "104.155568,30.482416",name: "四川省",value: "1206000",toCoord: ["104.155568", "30.482416"],},],},};},mounted() {this.initMap();},methods: {convertData(data) {var res = [];let { saddr, eaddr } = data;for (var i = 0; i < eaddr.length; i++) {var dataItem = eaddr[i];res.push({fromName: saddr.name,toName: dataItem.name,coords: [saddr.fromCoord, dataItem.toCoord],value: dataItem.value,});}return res;},initMap() {const option = {backgroundColor: "transparent",//amap地图配置amap: {center: [113.74947682142859, 22.835607857142858],resizeEnable: true,mapStyle: "amap://styles/blue", //地图样式白色rotation: 10,zoom: 5, //缩放viewMode: "3D", //是否启用3d地图pitch: 35, //视角高度skyColor: "#33216a",},animation: true,series: [{type: "lines",zlevel: 2,coordinateSystem: "amap",symbolSize: 10,effect: {show: true,period: 6,trailLength: 0,symbol: "arrow",symbolSize: 10,},lineStyle: {normal: {color: "#A6C84D",width: 2, //尾迹线条宽度opacity: 1, //尾迹线条透明度curveness: 0.3, //尾迹线条曲直度},},data: this.convertData(this.linesData),},{name: 333,type: "effectScatter",coordinateSystem: "amap",// coordinateSystem: "geo",zlevel: 2,rippleEffect: {brushType: "stroke",},label: {normal: {show: true,position: "right",formatter: "{b}",},},symbolSize: function (val) {return 8;},itemStyle: {normal: {show: false,color: "#A6C84D",},emphasis: {areaColor: "#A6C84D",},},data: this.linesData.eaddr.map(function (dataItem) {return {name: dataItem.name,value: dataItem.toCoord.concat([dataItem.value]),};}),},//被攻击点{type: "scatter",coordinateSystem: "amap",// coordinateSystem: "geo",zlevel: 2,rippleEffect: {//涟漪特效period: 4, //动画时间，值越小速度越快brushType: "stroke", //波纹绘制方式 stroke, fillscale: 10, //波纹圆环最大限制，值越大波纹越大},label: {normal: {show: true,position: "right", //显示位置offset: [5, 0], //偏移设置formatter: "{b}",fontSize: 14,textStyle: {color: "#ff0",},},emphasis: {show: true,color: "#A6C84D",},},symbol: "pin",symbolSize: 100,itemStyle: {color: "#A6C84D",},data: [{name: this.linesData.saddr.name,value: this.linesData.saddr.fromCoord,},],},],};var chart = echarts.init(document.getElementById("chart03"));chart.setOption(option);// 获取amap实例 var amap = chart.getModel().getComponent("amap").getAMap();        AMap.plugin('AMap.ToolBar',function(){//异步加载插件var toolbar = new AMap.ToolBar();amap.addControl(toolbar);});    // var satelliteLayer = new AMap.TileLayer.Satellite();//卫星图层// var roadNetLayer = new AMap.TileLayer.RoadNet();//道路图层// amap.add([satelliteLayer, roadNetLayer]);}, },
};

注意：在给amap添加控件的时候，网上好多写法是：

amap.addControl(new AMap.Scale());

amap.addControl(new AMap.ToolBar());

而我用这种方法，一直报错，开始以为是没有AMap，后来打印发现是有AMap的

分析：后来发现是因为他们在因为amap的api时，已经定义了插件，例如：

后来我用这种方式顺利解决，或者在引入api时定义

     AMap.plugin("AMap.ToolBar", function () {//异步加载插件var toolbar = new AMap.ToolBar();amap.addControl(toolbar);});

echarts结合amap (echarts-extension-amap)相关推荐

【大屏】 amap + echarts 踩坑以及避免办法
amap + echarts 踩坑以及避免办法大屏踩坑代码大屏 html,body,#container { margin: 0; padding: 0; width: 5376px; hei ...
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
echarts formatter_vue使用echarts的方法
vue中经常需要使用echarts图标,这是我的总结方法,记录在这里,以便后续再想使用的时候可以快速找到自己的日记. 1.先在vue中安装导入echarts import echarts from ' ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
ECharts 之引用ECharts
获取ECharts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错 ...
vue3使用echarts并封装echarts组件
vue3使用echarts并封装echarts组件前言: 一.安装并导入echart 1.npm下载包 2.配置echarts 二.使用echarts 三.封装echarts为组件前言: 本文使用 ...
php echarts官网,Echarts用法详细介绍
这篇文章主要介绍了Echarts基本用法,详解的介绍了Echarts的基本用法和实例,有兴趣的可以了解一下 echarts太完美了: 1,开源软件,无私的为我们提供漂亮的图形界面: 2,使用简单,默默 ...
【Echarts教科书】Echarts数据统计图表教学（详细）
文章目录一.什么是Echarts? 二.Echarts的下载三.Echarts的开发步骤 3.1 Echarts的引入 3.2 Echarts入门案例步骤四.Echarts官方文档的使用 4.1 ...
vue集成echarts，vue+echarts实现中国地图和河南省地图
安装echarts npm install echarts -D 配置echarts 在项目src目录下main.js文件中加入配置: import echarts from 'echarts'Vue ...
echarts grid的样式位置_vue使用Echarts vue使用Echarts滚动条
最近公司一个项目需要绘制图标,数据很多都要放在一张图标上面,说起图标肯定先想到Echarts , 刚好Echarts也配置了滚动条.下面分享一下 github: loever/vueEchartsg ...

echarts结合amap (echarts-extension-amap)

实现效果

安装

首先

地图页面

echarts结合amap (echarts-extension-amap)相关推荐

最新文章

热门文章