美文网首页Vue.js开发技巧H5前端技术分享程序员
百度Echarts图表在Vue项目的完整引入以及按需加载

百度Echarts图表在Vue项目的完整引入以及按需加载

作者: 胡哥有话说 | 来源:发表于2018-06-15 12:04 被阅读508次

    导语

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

    Echarts官网木有良好的说明啊,你知道不知道...

    一、完整引入Echarts

    1. 下载安装echarts包

       npm install echarts -D 
      
    2. 定义图表显示的容器,并进行渲染

       <template>
            <div id="myChart" ref="myChart"></div>     
       </template>
       <style>
           #myChart {
               width: 95%;
               height: 300px;
               margin: 20px auto;
               border: 1px solid #CCC
           }
       </style>
       <script>
       // 引入完整的echarts
       import echarts from 'echarts'
       export default {
           created () {
               // 调用绘制图表的方法
               this.draw();
           },
           methods: {
               draw () {
                   // 实例化echarts对象
                   myChart = echarts.init(this.$refs.myChart)
                   
                   // 绘制条形图
                   myChart.setOption({
                       title: {
                           text: 'Echarts 入门实例',
                           top: 5,
                           left: 'center'
                       },
                       legend: {
                           data: ['衣服', '帽子', '裤子', '鞋子'],
                           top: 30
                       },
                       // X轴
                       xAxis: {
                           data: [
                               '一月', '二月', '三月', '四月'
                           ]
                       },
                       // Y轴
                       yAxis: {},
                       // 数据
                       series: [
                           {
                               name: '衣服',
                               type: 'bar',
                               data: [120, 100, 440, 320]
                           },
                           {
                               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>
      

    看效果:


    Echarts的条形图bar

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

    二、Echarts 按需加载

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

       // 文件路径 @/lib/echarts.js 自行配置
       
       // 加载echarts,注意引入文件的路径
       import echarts from 'echarts/lib/echarts'
       
       // 再引入你需要使用的图表类型,标题,提示信息等
       import 'echarts/lib/chart/bar'
       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 {
           created () {
               // ...与上面实例相同
           },
           methods: {
               draw () {
                   // ... 与上面实例相同
               }
           }
       }   
       </script>
      

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

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

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

    1. 下载babel-plugin-equire

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

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

       const echarts = equire([
           // 写上你需要的
           'bar',
           'legend',
           'title'
       ])
       
       export default echarts
      
    4. 和上面案例配置是相同的,可以更加愉快的玩耍了...

    结语

    好了,各位小伙伴,以上就是百度Echarts图表在Vue项目汇总的应用的分享,喜欢的小伙伴记得点赞分享呦。

    在应用中很多的场景都是请求数据后,再进行图表的绘制,那么期待我的下一篇文章吧:《百度Echarts图表在Vue异步数据场景下的绘制》

    相关文章

      网友评论

      本文标题:百度Echarts图表在Vue项目的完整引入以及按需加载

      本文链接:https://www.haomeiwen.com/subject/ttmpeftx.html