VUE组件化与Framework7结合使用Echarts

VUE是一种渐进式的JS框架，它简单易用，灵活，高效，但是这个是针对于对VUE有了一定了解的，它的简单高效如果针对于新手来说会给你带来数不清的问题。最重要的是他的UI框架，VUE开发过程中如果你要自己去写一些功能的话，那就太麻烦了，所以VUE的UI框架Framework7就应运而生了，他的出现极大减少了前端工作中的一些功能的构建，而且Framework7完美支持移动端，对于安卓和IOS的区分比较明显，好了话不多说，让我们进入Framework7和VUE的页面中吧

首先是VUE和Framework7以及Eacharts的引用 你可以使用script的方式

当然你也可以用npm的方式安装，但是有的时候npm不会起作用，需要换成淘宝镜像cnpm，

换成淘宝镜像

然后就是安装上面所说的三种框架

1.   npm install framework7                      import Framework7 from 'framework7';

2.  npm install vue                                    import vue   from 'vue';

3.  npm install echarts                              import echarts from 'echarts ';

安装完成之后启用项目首先要安装依赖然后npm run dev 启动项目 然后把Framework7里面的组件引用进去

然后就会出现你引用的组件实例

然后引用Echarts组件，选择组件模型

接下来就是对这个简陋的APP进行优化了

   首先Echarts里面的数据是死数据，然后每次调用都要重新写一遍这个明显不符合我们使用VUE组件化的目的，怎么才能简化这哥步骤呢？毋庸置疑是VUE的组件化

    首先我们先分析一下咱们的目的，目的就是在项目中能够实现这个雷达图，所以我们要对这个雷达图进行封装让他成为一个组件，

当他成为组件的时候我们需要考虑他的数据，这个数据总不能我们没调用一次，就给他写一遍，那样的话依然没有达到我们的目的，所以咱们要使用VUE的父子传值，把Echarts的数据从父组件传给子组件这样的话以后修改只需要修改他的数据就OK了，

这个时候针对于Echarts的封装就完成了，但是我们去看效果的时候发现他不能自适应，所以我们还要解决他自适应的问题

当然有长宽比小于一也有大于1的这个只需要修改下面这个参数就行了

现在雷达图出来了我们不能只在页面上看到，所以还许哟啊一个下载

这样就算完成了一个简陋的针对于VUE+Framework7使用Echarts的实例。