zoukankan      html  css  js  c++  java
  • Echarts的按需加载

    Echarts的按需加载

    1.第一种按需加载的方式,需要我们手动引入比较麻烦

    // 第一种按需加载的方法
    
    // 在utils目录下新建一个initEcharts.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
    
    
    // 在main.js中引入使用
    
    import echarts from './utils/initEcharts'
    
    Vue.prototype.$echarts = echarts

    2.使用 babel-plugin-equire 插件实现按需加载

    // 先安装 babel-plugin-equire 插件
    
    npm i babel-plugin-equire -D
    
    // 然后在 babel.config.js 中配置插件
    
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
          }
        ],
    
        // 注册使用一下
        'equire'
      ]
    }
    
    // 注意:此时需要重新启动一下项目
    
    
    // 在 utils 下的 initEcharts.js 中按需加载
    
    // eslint-disable-next-line    此英文是为了取消eslint的报错
    const echarts = equire([
      'bar',
      'legend',
      'title'
    ])
    
    export default echarts
  • 相关阅读:
    在springmvc中,什么是逻辑视图?什么是物理视图?
    docker2
    docker1
    HTTP Service 中篇
    HTTP Service 上篇
    Centos7 fstab盘符挂载硬盘导致重启系统失败解决办法
    vsphere网络
    LVS的工作原理认识
    数字转换
    对def函数的参数认识
  • 原文地址:https://www.cnblogs.com/zxuedong/p/13140817.html
Copyright © 2011-2022 走看看