vue-cli中使用echarts

安装echarts 依赖

image.png

全局引入

main.js中


image.png

在所需页面使用 如hello.vue

image.png

image.png

注意:一定要给使用的echarts的容器一个宽高,我这里外面标签有一个固定宽高所以写的宽高100%本以为没问题但是后来导致项目重新运行是地图会缩到一起,最后把echarts所在的标签样式改为固定宽高就解决了


image.png

image.png
image.png

[图片上传中...(image.png-bb3182-1564975959394-0)]

注意:这里echarts初始化应该在钩子函数mounted()中,mounted钩子函数是在el被新创建的vm.$el替换,并挂载到实例上之后调用

按需引入

全局引入会将所有的echarts图表的依赖打包,导致项目体积过大,按需引入可以缩小项目体积

hello.vue


image.png

注意:使用import必须把路径写全,而require可以直接从mode_modules中查找

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容