vue项目中Echarts图表完整引入、按需加载以及修改主题色,福利分享【附源码】_A登顶珠峰

                         name: '帽子',                           type: 'bar',                           data: [200, 120, 240, 330]                       },                       {                           name: 'bar',                           type: 'line',                           data: [120, 200, 240, 260, 300]                       },                       {                           name: 'bar',                           type: 'line',                           data: [120, 200, 300, 140, 260]                       }                   ]                                      })           }       }   }   </script>  ```

看效果:

vue项目中Echarts图表完整引入、按需加载以及修改主题色,福利分享【附源码】_A登顶珠峰

Echarts的条形图bar

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

二、Echarts 按需加载


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

      // 文件路径 @/lib/echarts.js 自行配置   // 加载echarts,注意引入文件的路径   import echarts from 'echarts/lib/echarts'   // 再引入你需要使用的图表类型,标题,提示信息等   import 'echarts/lib/chart/bar'   import 'echarts/lib/chart/line'   import 'echarts/lib/component/legend'   import 'echarts/lib/component/title'   export default echarts 
  2. 在需要的组件内加载echarts,绘制图表

      <template>       // ... 与上面实例相同   </template>   <style>       // ... 与上面实例相同   </style>       <script>   // 重点:此位置引入的是你单独配置的echarts   import echarts from '@/lib/echarts'   export default {       mounted () {           // ...与上面实例相同       },       methods: {           draw () {               // ... 与上面实例相同           }       }   }      </script> 

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

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


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

  1. 下载babel-plugin-equire

      npm install babel-plugin-equire -D   or   yarn add babel-plugin-equire --dev 
  2. 在.babelrc文件中的配置

      "plugins": [       "... 其他插件",       "equire"   ] 
  3. 修改@/lib/echarts文件

最后

前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档

CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

vue项目中Echarts图表完整引入、按需加载以及修改主题色,福利分享【附源码】_A登顶珠峰

vue项目中Echarts图表完整引入、按需加载以及修改主题色,福利分享【附源码】_A登顶珠峰

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » vue项目中Echarts图表完整引入、按需加载以及修改主题色,福利分享【附源码】_A登顶珠峰

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情