echarts

安装并使用echarts

1. 用npm安装echarts:

2. 在src文件夹下的main.js文件中全局引入和注册echarts：

3、在src下的components下新建一个组件文件EchartsDemo.vue:

4、入口组件App.vue引用EchartsDemo.vue组件:

5、运行npm:

最后结果：

vue-cli中使用echarts自适应

继上述的vue-cli中使用echarts，之后又考虑echarts的自适应的问题，其实echarts是自适应的，但是因为echarts是用canvas绘制的，且不是跟随浏览器大小实时绘制的，而是在改变浏览器大小之后，再刷新一下页面才会再次绘制，作为开发者，我们会在pc端看到浏览器放大缩小后的echarts图片的改变，但是如果是手机端，那么一开始，用户就会在浏览器里看到缩小后的echarts图片。

更加要注意的是，可能由于echarts的机制问题，或是之前已经引用的手淘lib-flexible库问题，在vue-cli中css代码一定要在style里定义，而不能在标签里行内定义，否则是不具备自适应的能力的。例子（该例子都是用px作为尺寸写，用px写的前提是已经引入了手淘lib-flexible）：

1、内联css

我缩小浏览器后打开网址，echarts图片没有缩小：

2、写到style中

我缩小浏览器后打开网址，echarts图片缩小了：

对比例子1、2,就可以看出，style中的css代码会自适应，而写在标签行内的代码就不可以自适应。