search

plainheart / echarts-extension-amap

🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)
https://github.com/plainheart/echarts-extension-amap
MIT License
251 stars 83 forks source link

有vue的例子吗 #14

Closed zhengquan45 closed 2 years ago

zhengquan45 commented 3 years ago

现在这个插件能在vue下运行吗？我看例子是普通html的

plainheart commented 3 years ago

在 vue 里边地使用方式差不多一样的，npm 安装下 echarts 和 echarts-extension-amap 然后使用 import 引入即可。

zhengquan45 commented 3 years ago

我该如何引入高德的地图js

https://github.com/zhengquan45/shaowu 我做的一个vue的demo但是可能由于地图js没引入无法渲染出图片

plainheart commented 3 years ago

在你的仓库中，我好像没看到地图相关的代码？

我该如何引入高德的地图js

最简单的方法是直接在 index.html 中引入，或者也可以用一个脚本动态引入下。 可参考这篇文章：https://www.jianshu.com/p/9d14ea74d2e0

plainheart commented 3 years ago

刚看到你只导入了 echarts 而没有导入 echarts-extension-amap 可以在导入 echarts 下边一行输入

import 'echarts-extension-amap'
zhengquan45 commented 3 years ago

谢谢，我尝试一下

plainheart commented 3 years ago

顺带说一下，高德地图目前官方有提供封装好的 js loader，参见 https://www.npmjs.com/package/@amap/amap-jsapi-loader

jhxxs commented 3 years ago

顺带说一下，高德地图目前官方有提供封装好的 js loader，参见 https://www.npmjs.com/package/@amap/amap-jsapi-loader

按照readme提供的动态引入echarts和echarts-extension-amap，使用官方提供的js loader加载sdk，发现echarts-extension-amap会报AMap undefined错误。

plainheart commented 3 years ago

用的是哪个版本？引入的代码方便截图下么？

jhxxs commented 3 years ago

用的是哪个版本？引入的代码方便截图下么？

以下是我按照文档提供的按需引入，然后用了最新版的echarts和vue-echarts，

import "@amap/amap-jsapi-types" // @amap+amap-jsapi-types@0.0.8
import {
  AMapComponentOption,
  install as AMapComponent
} from "echarts-extension-amap/export" // echarts-extension-amap@1.10.0
import {
  EffectScatterChart,
  EffectScatterSeriesOption,
  ScatterChart,
  ScatterSeriesOption
} from "echarts/charts" // echarts@5.2.0
import { TitleComponentOption, TooltipComponent } from "echarts/components"
import * as echarts from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import VChart from "vue-echarts" // vue-echarts@6.0.0
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" />

 <VChart  
   ref="chartRef"
   :option="option"
   :loading="chartLoading"
   :loading-options="loadingOptions"
 />

composition-api文档 初始化我放在了onMounted生命周期里，使用的是官方loader加载的方式，版本就是默认的1.4.15，没有使用AMapUI

plainheart commented 3 years ago

@jhxxs 最新版本是 1.10.1 可能需要升级下

XUXUANJUN commented 2 years ago

@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

plainheart commented 2 years ago

@XUXUANJUN 是怎么引入高德地图脚本的？有配置key吗？在初始化 ECharts 之前，应该先等高德地图加载完毕。

XUXUANJUN commented 2 years ago

@plainheart 我按我的需求来看目前是不需要引入高德地图脚本。是必须要引入脚本吗？在README.zh-CN.md我是按照这个文档的步骤进行操作的

plainheart commented 2 years ago

这个依赖高德地图，是必须引入的。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

XUXUANJUN commented 2 years ago

@plainheart 谢谢你，我的超人，是我笨比了