vue项目按需引入Echart实现数据可视化

       最近做大数据展示平台，需要用到很多图表去实现数据可视化，图表比较多，但其实用到的就是 饼图、柱状图和折线图，如果完整引入，会多很多不必要的插件和增大包的体积，最近一直在上性能优化的课，明白 完整引入和按需引入的差别，所以认真去了解了Echart如何按需引入，在此记录一下：

1、安装babel-plugin-equire插件，装在 devDependencies 里，即装在开发环境里，不需要装在生产环境里

npm install babel-plugin-equire -D

2、在 .babelrc文件里 的plugins加入equire插件，vue-cli3 以上版本没这个文件，可以自己直接新建一个，与package.json同级

3、新建一个 echarts.js文件，一般放在lib文件夹下，其他地方也可以，文件内容如下：

const echarts = equire([
    // 写上需要的组件
    'bar',   //柱状图
    'pie', //饼图
    'line', //折线图
    'legend', //图例
    'title',  //标题
    'tooltip' //提示工具
    
])
export default echarts

4、在需要用到图表的vue组件内引入即可，注意：这里引入的是您新建的echarts.js ，注意路径

import echarts from "@/lib/echarts";

到这里就实现了按需引入Echart了，下面是我实现的一个折线图效果

我一般从后端请求回数据之后，处理成我要的数据格式，然后调用 绘图方法

之所以要把 绘图的方法放在  $nextTick里，是因为图表不一定是固定的，还可能需要根据后端返回的数据动态渲染DOM结构，要想绘制图标 就需要获取到最新的DOM结构。不然会报无法获取DOM结构错误。

图表的配置代码，即option，我没有贴上来，因为太长了，不同项目有不同的配置需求，建议直接看官方文档，非常详细：https://echarts.apache.org/zh/option.html#series

ps：官方的实例挺多的，建议找个相似的实例看一下，个人感觉，官方写的比较简洁，没有那么多 多余的代码

官方实例：https://echarts.apache.org/examples/zh/index.html

他的配置文档里，很多配置参数右侧都有一个试一试，可以测试一下效果，很直观，挺好用的，我刚开始还没注意到

 

ps：菜鸟成长过程的简单记录，如果不严谨之处，欢迎指正！