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中查找