zoukankan      html  css  js  c++  java
  • vue按需引入echarts

      下载安装echarts包:npm install echarts -D

    一、全局引入

      main.js中配置

    import echarts from 'echarts' //引入echarts
    Vue.prototype.$echarts = echarts //引入组件

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

    二、按需引入

      如果是在许多页面中都有用到,就写在main.js中

    //引入基本模板
    let echarts = require('echarts/lib/echarts')
     
    // 引入折线图等组件
    require('echarts/lib/chart/line')
    require('echarts/lib/chart/bar')
    require('echarts/lib/chart/radar')
    
    // 引入提示框和title组件,图例
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')
    require('echarts/lib/component/legend')
    require('echarts/lib/component/legendScroll')//图例翻译滚动
    
    Vue.prototype.$echarts = echarts

      在组建中使用都是一样的,如果只在一个地方使用就直接写在.vue文件中就好啦

      注:这里用 require 不用 import 引入是因为 import 需要详细的路径

      然后打包,,比全部导入1.69M,少了差不多400K。

  • 相关阅读:
    制作Windows Server 2008安装启动U盘
    wireshark教程(一)
    TCPdump抓包命令详解
    ATM交换机 和普通交换机区别
    胖ap和瘦ap区别
    酒店网络非常常见故障一例
    JQuery EasyUI DataGrid动态合并(标题)单元) 一
    字典表左右选择
    treegrid-dnd.js
    MySQL开发规范
  • 原文地址:https://www.cnblogs.com/goloving/p/9302213.html
Copyright © 2011-2022 走看看