Vue + Echarts 的开发 使用 注意

Vue + Echarts GitHub上的项目分析理解

一般来说，大多数公司的技术栈都是vue开发，所以就只讲vue相关的吧，我看GitHub也有很多的vue+Echarts的开源项目，我把它git clone下来也大概看了看。

我发现高手就是不一样，设计非常合理，举个简单的例子，他们的脚手架项目的搭建和配置都非常规范，
我还发现【vue中引组件不光可以引一个vue格式的文件，竟然还可以引入一个文件夹？ 真不知道】
这一点有大佬知道的还望不吝赐教一下。

那就让俺来说一下高手是怎么设计的：

比如在views文件夹下面创建一个index.vue骨架组件，然后骨架组件引用同目录下面的器官组件，而这些器官组件都是通过位置命名，这样在页面就方便找对应位置的组件，然后在components组件库里面先写好对应位置的文件名，用的时候直接的用对应位置的Echarts组件就行了【在这里我看有位高手还直接在@/下面多写了一个common文件，用于放置封装好的Echarts组件库，太强了，这样一来可以自由搭配，要用什么组件直接在配置的时候多配置一项。 :id="Echarts组件名"就OK了】

事实证明，有空真的多看下大佬写的代码，你就会发现，你会从蒙蔽的状态——有点感觉但是还是晕——回归蒙蔽。
恭喜你，你已经学会了。（此说法来自倚天屠龙记中张三丰传太极拳给张无忌的情景）

tips：怎么在vue中引用Echarts这个就不说了，网上到处都是。
原理可以讲一下：

【1】随便写个div给他个id之类的（这一步为“绑定dom”）
【2】要在methods里面写个函数，名字随意，然后：
let myChart = this.$echarts.init(document.getElementById(“main”)); （这一步为“初始化echarts实例”）
【3】还是在那个函数里面 继续写 指定图表的配置项和数据【这里直接简单粗暴点，从官网上找你想用的实例图，点击它然后把它的代码直接CV过来就可以了】 （这一步为“找对应图表配置对应数据”）
【4】还是在那个函数里面 一般是最后一行代码了，myChart.setOption(option); （这一步为“显示图表”）
【5】最后一步，也是关键一步 在mounted生命周期钩子里面调用一次你写的那个函数。
为什么用这个钩子，原因很简单，要在dom加载完成后才可以调用，那肯定就是这个钩子了啊，不懂的直接百度vue的八个生命周期钩子的特点。 （这一步为 “dom加载完调用”）

总结

我觉得记住我总结的这五步，绑定dom——初始化echarts实例—— 找对应图表配置对应数据—— 显示图表 —— dom加载完调用
以后vue中用Echarts 应该问题不大了吧。