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，这一下少了一半。

标签