vue + echart4.0 按需引入

一、echarts4.0 按需引入需要先自定义构建

1、现在项目src 目录下新建vendor(可以自己随便建就行，等会要用到)目录

2、在src/vendor 目录下新建echarts.custom.js

我项目中只需要用到柱状图和 markPoint 和 tooltip，可以根据自己的需要在这里填写相应组件。

export * from 'echarts/src/echarts';
import 'echarts/src/chart/bar';
// 引入提示框和标题组件
import 'echarts/src/component/tooltip';
import 'echarts/src/component/markPoint';

// import 'echarts/theme/macarons'; // echarts theme  

注意：
1、不要引入这个 import 'echarts/theme/macarons'; // echarts theme ，引入它以后按需引入就失效了，不晓得为什么。
2、我们引入 echarts 组件时，可以从 echarts/src 也可以从 echarts/lib 引入，但是同时只能存在一种方式，这里要注意。

3、自定义构建

我是直接使用 node_modules/echarts 包里自带的构建工具:

官方给出的几个常用参数：

• -i：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。
• -o：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。
• --min：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。

node node_modules/echarts/build/build.js --min -i src/vendor/echarts.custom.js -o src/lib/echarts.custom.min.js

在使用过程中可能会报错下面几个错：

1)、提示你缺少下面三个依赖包，你只需要 安装一下就行，记得安装在 devDependencies里面。

"rollup": "^3.3.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",

2)、TypeError: uglifyPlugin is not a function

直接修改： node_modules/echarts/build/config.js 文件，将 uglifyPlugin 改成数组

在这里插入图片描述
然后重新执行上面的构建命令

3)、 Error: [BABEL] unknown file: Preset /* your preset */ requires a filename to be set when babel is called directly, 在这里插入图片描述

只需要将 babel.config.js 中的 presets 内的内容注释掉即可。

构建完成以后，会生成： /src/lib/echarts.custom.min.js

4、在页面文件中引入自定义构建的echarts

<template>
    <div
        :class="className"
        :style="{height:height,width:width}"
    />
</template>

<script>
    // 直接引入自定义构建后的包即可，其他的不用再引入了。
    import echarts from '@/lib/echarts.custom.min';
    export default {
        data () {
            return {
                chart: null
            };
        },
        mounted () {
            this.chart = echarts.init(this.$el);
        }
    };
</script>

5、重启项目

记得把 babel.config.js 中的 presets 内注释掉的内容还原回来，刚才注释只是为了自定义构建echarts组件。

6、打包测试一下

在这里插入图片描述

没有按需引入的时候，echarts相关的包都引入进来了，这个大小大约为509k，这一下少了一半。