头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

自定义构建Echarts问题描述

今天我们来学习一下Echarts,本文主要是总结自定义构建Echarts遇到的问题,跟着我一起来学习吧~

1.使用命令行,创建自己的工程:
1
2
mkdir myProject
cd myProject
2.在 myProject 目录下使用命令行,初始化工程的 npm 环境并安装 echarts(这里前提是您已经安装了 npm):
1
2
npm init
npm install echarts --save

Image1.png

3.使用 echarts 提供的构建脚本自定义构建

在这个例子中,我们要创建一个饼图,并且想自定义构建一个只含有饼图的 echarts 文件,从而能使 echarts 文件的大小比较小一些。
echarts 已经提供了构建脚本 echarts/build/build.js,基于 Node.js 运行。我们可以在 myProject 目录下使用命令行,看到它的使用方式:

1
node node_modules/echarts/build/build.js --help

注意:这里会出现报错

1
Error: Cannot find module 'XXX'

翻译出来就是找不到 ‘XXX’ 组件,我也是通过查找的方法,进行实践,缺啥就安装啥,可能会有很多的模块找不到,就一个一个进行安装就行,执行

1
2
npm install XXX --save
//这里的 XXX 指的是报错中缺少的模块名

Image2.png
Image3.png
以上几个模块安装成功就会显示如下,你可以输入–help指令查看参数的含义:
Image4.png
其中我们在这个例子里会用到的参数有:

  • -i:代码入口文件,可以是绝对路径或者基于当前命令行路径的相对路径。
  • -o:生成的 bundle 文件,可以是绝对路径或者基于当前命令行路径的相对路径。
  • –min:是否压缩文件(默认不压缩),并且去多余的打印错误信息的代码,形成生产环境可用的文件。
  • –lang :是否使用其他语言版本,默认是中文。例如:–lang en 表示使用英文,–lang my/langXX.js 表示构建时使用 /my/langXX.js 替代 echarts/lib/lang.js 文件。
  • –sourcemap:是否输出 source map,以便于调试。
  • –format:输出的格式,可选 ‘umb’(默认)、’amd’、’iife’、’cjs’、’es’。
4.既然我们想自定义构建一个只含有饼图的 echarts 文件,我们需要创建一个入口文件,可以命名为 myProject/echarts.custom.js,文件里会引用所需要的 echarts 模块:
1
2
3
4
5
6
// 引入 echarts 主模块。
export * from 'echarts/src/echarts';
// 引入饼图。
import 'echarts/src/chart/pie';
// 在这个场景下,可以引用 `echarts/src` 或者 `echarts/lib` 下的文件(但是不可混用),
// 参见下方的解释:“引用 `echarts/lib/**` 还是 `echarts/src/**`”。
5.然后我们可以在 myProject 目录下使用命令行,这样开始构建:
1
node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js

注意:这里会出现报错

1
TypeError: uglifyPlugin is not a function

Image5.png
出错原因是依赖插件rollup-plugin-uglify版本过高,查看当前版本:

1
npm view rollup-plugin-uglify versions

Image6.png
重新npm install特定的版本:

1
npm install rollup-plugin-uglify@3.0.0 --save

Image7.png
这回就能构建成功了这样,myProject/lib/echarts.custom.min.js 就生成了。
Image8.png

6.我们可以创建 myProject/pie.html 来使用它:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>myProject</title>
<!-- 引入 lib/echarts.custom.min.js -->
<script src="lib/echarts.custom.min.js"></script></head><body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 绘制图表。
echarts.init(document.getElementById('main')).setOption({
series: {
type: 'pie',
data: [
{name: 'A', value: 1212},
{name: 'B', value: 2323},
{name: 'C', value: 1919}
]
}
});
</script></body></html>
7.运行程序,这样一个饼图就出来啦

Image9.png

Lililich's Blog