图表

    我还是那个观点，大部分插件建议大家还是自己用 vue 来封装就好了，真的很简单。ECharts 支持 webpack 引入，图省事可以将 ECharts 整个引入 不过 ECharts 还是不小的，如果只使用它小部分功能或者图表类型的话建议按需引入。

    ECharts 按需引入模块文档图表 - 图1

    接下来我们就要在 vue 中声明初始化 ECharts 了。因为 ECharts 初始化必须绑定 dom，所以我们只能在 vue 的 mounted 生命周期里进行初始化。

    其实都差不多，还是要结合自己业务来封装。后面就和平时使用 ECharts 没有什么区别了。题外话 ECharts 的可配置项真心多，大家使用的时候可能要花一点时间了解它的 api 的。知乎有个问题：百度还有什么比较良心的产品？答案：ECharts，可见 ECharts 的强大与好用。

    TIP

    具体实例可参照 @/views/dashboard/admin/components/ 文件下几个 chart 文件

    ECharts-width.png

    因为 ECharts 本身并不是自适应的，当你父级容器的宽度发生变化的时候需要手动调用它的 .resize() 方法。 所有比如 el-tab，你可以监听 事件，当变化时找到这个图表之后调用它的 .resize() 方法。

    如果是 el-dialog之中放图表就比较简单了，只要在 dialog 出现之后再 init 图表就可以了。

    当然社区里的其它图表如 , Chart.js图表 - 图3 , 等封装方法都是大同小异差不多的，这里就不再展开了。