layui 扩展组件 echarts

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