layui项目，需要展现图表相关功能怎么办，官网默认使用的echarts图表库，但是免费下载的组件中，并不包含echarts组件，我们需要自己扩展组件。
（1）
html：
<div id="EchartZhu" style="width: 500px;height: 500px;"></div>
引用js文件：
<script src="layui/layui.all.js"></script>
下面是比较重要的部分，我们如何才能将echarts模块引入到我们自己的文件中去使用呢？
（2）
从echarts官网下载echarts的压缩文件，比较重要的两个文件 /dist：
图片
将这两个文件复制到我们的项目中，放置的位置随意，只要你在引用的时候写对位置就行了。
图片
修改echarts.js：
原头部：
图片
修改为：
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
window.layui && layui.define ? layui.define(function(exports){
exports('echarts',factory(exports))}) :
(factory((global.echarts = {})));
}(this, (function (exports) { 'use strict';
最下面尾部还需要加上 return exports;
否则在引用的时候会报错：Uncaught TypeError: Cannot read property 'init' of undefined
图片
（3）引入并使用模块
//config的设置是全局的
layui.config({base:'layui/layui_ext/',debug: true});
//设置模块的名称
layui.extend({ echarts: 'echarts'});
或者可以直接连接
layui.config({base:'layui/layui_ext/',debug: true}).extend({ echarts: 'echarts'});
使用模块
layui.use(['jquery', 'echarts'], function(){
//use 模块名称
var $ = layui.jquery;
//调用echarts模块
var echarts = layui.echarts;
var chartZhu = echarts.init(document.getElementById('EchartZhu'));
//指定图表配置项和数据
var optionChart = {
title: {
text: '商品订单'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: [100,200,300,400,500,600,700],
itemStyle: {
normal: {
color: 'red'
}
}
},{
name:'产量',
type:'bar',
data:[120,210,340,430,550,680,720],
itemStyle:{
normal:{
color:'blue'
}
}
}]
};
chartZhu.setOption(optionChart, true);
});
（4）最终呈现
最终呈现
（5）总结
- 修改echarts文件的时候，尾部的 return exports; 不能忘记，否则会报错；
- 官网关于扩展组件的方法，可以再研究学习一下，其他组件方法类同：https://www.layui.com/doc/base/modules.html#extend
