Vue中使用Echarts中的地图组件报错:TypeError: api.coord is not a function
echarts地图成功案例
·
首先,既然你是Vue开发者,那么其它的就不多讲,简短的说下
本人是Java开发,所以有些地方可能不适用所有人,接受大家的建议。
一. 既然在Vue中使用Echarts,那将echarts引入到vue项目中,应该都会:
命令:npm install echarts -S 或 cnpm install echarts -S
执行完后
需要使用echarts的vue页面中,引入其组件,这边建议是用“*” 即引入全部(因为作为初学者,我们需要的是先要有用!再去考虑其效率和消耗):
import * as echarts from "echarts";
以上只是最基本的工作,然后就是来解决地图的问题了:
首先出现文章开头的那个错误,是因为,地图组件中使用的是百度地图,百度地图调用,是需要有密钥的(AK),所以在百度地图开放平台中,注册登陆账号后,申请开发者,然后创建应用,选择 Javascript或浏览器应用,就可以获得AK密钥
然后在vue项目中的index.html 中,引入百度地图:
<script src="https://api.map.baidu.com/getscript?v=3.0&ak=这里放你的AK密钥"></script>
现在你应该,感觉差不多可以了,想看看是不是有用,然后你发现,不行,哈哈哈哈哈哈哈哈
接下来,在你要使用echats地图的vue页面中,指定引入map相关:
import 'echarts/extension/bmap/bmap'
OK,现在你轻轻的保存一下页面,再看看,是不是发现地图粗来了~
over~ 下班肥家
更多推荐
已为社区贡献3条内容
所有评论(0)