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)总结

推荐阅读更多精彩内容