echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载

导语

近日在项目中需要进行图表展示，百度的Echarts图表是非常合适的一个选择。项目是vue-cli搭建的，如何在项目中引入Echarts就是一个问题了。亲自动手实践了下，整理总结，希望对小伙伴提供一些帮助，少踩一些坑。

Echarts官网木有良好的说明啊，你知道不知道…

一、完整引入Echarts

1. 下载安装echarts包

   npm install echarts -D 

2. 定义图表显示的容器，并进行渲染

   <template>

看效果：

Echarts的条形图bar

缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验。

二、Echarts 按需加载

1. 专门设置一个echarts配置文件

   // 文件路径 @/lib/echarts.js 自行配置

2. 在需要的组件内加载echarts，绘制图表

   <template>

按此方式打包的项目，会只加载引用你所使用的图表、标题、提示信息等组件，降低了应用文件体积，实现按需加载

三、引入插件babel-plugin-equire,配合实现Echarts按需引入

在上面的实例中，我们单独配置的echarts文件，需要引入对应的图表、标题、提示信息等，都需要我们手动进行加载，比较麻烦。引入babel-plugin-equire插件，方便使用。

1. 下载babel-plugin-equire

   install babel-

2. 在.babelrc文件中的配置

   "plugins": [

3. 修改@/lib/echarts文件

   // eslint-disable-next-line

4. 和上面案例配置是相同的，可以更加愉快的玩耍了…

结语

好了，各位小伙伴，以上就是百度Echarts图表在Vue项目中应用的分享，喜欢的小伙伴记得点击在看，转发朋友圈分享呦！