Comments (15)
在 vue 里边地使用方式差不多一样的,npm 安装下 echarts 和 echarts-extension-amap 然后使用 import 引入即可。
from echarts-extension-amap.
我该如何引入高德的地图js
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={ak}&plugin=AMap.Scale,AMap.ToolBar,AMap.CustomLayer"></script>https://github.com/zhengquan45/shaowu 我做的一个vue的demo但是可能由于地图js没引入无法渲染出图片
from echarts-extension-amap.
在你的仓库中,我好像没看到地图相关的代码?
我该如何引入高德的地图js
最简单的方法是直接在 index.html 中引入,或者也可以用一个脚本动态引入下。
可参考这篇文章:https://www.jianshu.com/p/9d14ea74d2e0
from echarts-extension-amap.
刚看到你只导入了 echarts 而没有导入 echarts-extension-amap
可以在导入 echarts 下边一行输入
import 'echarts-extension-amap'
from echarts-extension-amap.
谢谢,我尝试一下
from echarts-extension-amap.
顺带说一下,高德地图目前官方有提供封装好的 js loader,参见 https://www.npmjs.com/package/@amap/amap-jsapi-loader
from echarts-extension-amap.
顺带说一下,高德地图目前官方有提供封装好的 js loader,参见 https://www.npmjs.com/package/@amap/amap-jsapi-loader
按照readme提供的动态引入echarts和echarts-extension-amap,使用官方提供的js loader加载sdk,发现echarts-extension-amap会报AMap undefined错误。
from echarts-extension-amap.
用的是哪个版本?引入的代码方便截图下么?
from echarts-extension-amap.
用的是哪个版本?引入的代码方便截图下么?
以下是我按照文档提供的按需引入,然后用了最新版的echarts和vue-echarts,
import "@amap/amap-jsapi-types" // @amap[email protected]
import {
AMapComponentOption,
install as AMapComponent
} from "echarts-extension-amap/export" // [email protected]
import {
EffectScatterChart,
EffectScatterSeriesOption,
ScatterChart,
ScatterSeriesOption
} from "echarts/charts" // [email protected]
import { TitleComponentOption, TooltipComponent } from "echarts/components"
import * as echarts from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import VChart from "vue-echarts" // [email protected]
echarts.use([
CanvasRenderer,
TooltipComponent,
AMapComponent,
ScatterChart,
EffectScatterChart
])
// vue2+组合式API
import {
computed,
defineComponent,
onMounted,
reactive,
ref,
unref,
watch
} from "@vue/composition-api"
<VChart
ref="chartRef"
:option="option"
:loading="chartLoading"
:loading-options="loadingOptions"
/>
composition-api
文档
初始化我放在了onMounted
生命周期里,使用的是官方loader加载的方式,版本就是默认的1.4.15
,没有使用AMapUI
from echarts-extension-amap.
@jhxxs 最新版本是 1.10.1 可能需要升级下
from echarts-extension-amap.
@plainheart 您好,我按照文档的方式进行引入 "echarts-extension-amap": "^1.10.1","echarts": "^5.2.2", 这两个版本。在vue页面
import * as echarts from 'echarts'
import 'echarts-extension-amap';
这样引入两个组件,然后报错ReferenceError: AMap is not defined,请问我是缺少了哪里或者是做错了哪里吗?我的代码都是直接拷贝这个demohttps://codepen.io/plainheart/pen/qBbdNYx
from echarts-extension-amap.
@XUXUANJUN 是怎么引入高德地图脚本的?有配置key吗?在初始化 ECharts 之前,应该先等高德地图加载完毕。
from echarts-extension-amap.
@plainheart 我按我的需求来看目前是不需要引入高德地图脚本。是必须要引入脚本吗?在README.zh-CN.md我是按照这个文档的步骤进行操作的
from echarts-extension-amap.
这个依赖高德地图,是必须引入的。README 中讲了两种方式:
一种是在 html
中通过 script
引入
<script src="https://webapi.amap.com/maps?v=1.4.15&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
另一种是通过 Promise
自行封装一个脚本加载器或者使用高德官方提供的 amap-jsapi-loader
from echarts-extension-amap.
@plainheart 谢谢你,我的超人,是我笨比了
from echarts-extension-amap.
Related Issues (20)
- 在配置项中设置x轴或y轴的样式报错 HOT 3
- 关于监听缩放移动事件 HOT 5
- Provide `getScreenshot` API
- 关于地图初次载入时的背景色 HOT 2
- 路线图放大后会导致路线开始位置发生变化 HOT 8
- 高德地图Marker对象的事件无法触发。 HOT 1
- 请问这个用这种方式生成的amap 包含在哪个容器里面 为什么我无法改变它的大小 在vue中
- 这个问题当中 使用v1.8.0打包后能够加载 但是使用后续版本还是无法正确加载地图 使用1.8.0会有一个echart层和地图层有偏移的问题 但是后续版本又无法打包 HOT 3
- 3D model not showing HOT 2
- 散点图,数量达到3500个点以上就会出现卡顿 HOT 6
- 关于速度 HOT 5
- 有匹配高德API 2.0的计划吗? HOT 10
- 如何解决在echarts 上拖拽同时地图一同拖拽 HOT 5
- 切换按钮页面丢失 HOT 1
- 地图展示ecahrt 饼图,饼图位置一直在地图左上角 HOT 3
- 使用定时器刷新数据后导致内存泄漏 HOT 16
- echarts图层遮挡高德地图的mark HOT 2
- 使用高德v2.0时,拖动地图时上面的图表跟随会慢一拍 HOT 1
- 高德自建的自定义地图,使用无效 HOT 1
- 引入自己的key和自定义地图主题无效 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from echarts-extension-amap.