Layui或Layuimini整合Echarts 5

---

0. 前言

Layui中的Echarts版本已经不是最新版的了，Echarts5中的图形几乎都不能被完美地展现出来…

因此，将新版的Echarts整合到Layui中便成了当务之急🔔

---

1. 准备工作

• 在项目的js > layui-module下新建一个文件夹echarts-silk（命名随意），在该文件夹下创建一个echarts.js
  

---

2. 步骤

如果想自己动手从头到尾做一遍的话可以按照步骤的顺序来做。

如果不想的话可以直接下载本文第四部分提供的echarts.js（已经处理好的文件），放入到项目新建的文件夹中。随后跳过步骤2.1、2.2，直接从步骤2.3开始操作。

2.1 echarts.js中写一个回调函数

进入到创建好的echarts.js文件中，输入以下代码：

layui.define(function (exports) {

	// 在这里放入复制的echarts.min.js代码（获取这段代码的方法见下一步）

    exports('echarts', echarts);
});

2.2 源码放入回调函数中

获取最新版（目前为5.0.2）的echarts.min.js源码
（一般情况下，引入这一个文件中的源码就够用了）
【点击这里更多最新echarts源码】

1. 复制页面上的全部源码
   

2. 粘贴到echarts.js文件的回调函数中
   

2.3 lay-config.js中配置

进入到lay-config.js文件中，注释掉原本的echarts扩展，再加入以下代码：
（斜线前方为自己创建的文件夹名称，后方为js文件名称）

echarts: 'echarts-silk/echarts', // silk添加的echarts图表扩展

2.4 前端页面引入echats

关于Echarts的数据设置及展示可以参考Echarts快速入门指南

---

3. 效果

---

4. 资源

• 处理好的echarts.js文件