layui框架实战案例(26)：layui-carousel轮播组件添加多个Echarts图标的效果

在Layui中，使用layui-carousel轮播组件嵌套Echarts图表来实现多个图表的展示。

css层叠样式表

• 调整轮播图背景色为白色；
• 调整当个Echarts图表显示loading…状态；
• 同一个DIV轮播项目添加多个Echarts的

 .layui-carousel {
            background-color: #fff !important;
        }

        .layui-carousel > [carousel-item] > * {
            background-color: #fff;
        }

        /* 隐藏轮播加载状态 */
        .custom-carousel > .layui-carousel-loading {
            display: none !important;
        }

        .left-ec {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 300px;
        }

        .right-ec {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 300px;
        }

HTML容器

<div class="layui-carousel" id="lock_carousel">
    <div carousel-item id="lock_box"></div>
</div>

加载轮播组件

layui.use(function () {
        var carousel = layui.carousel;

        // 渲染 - 设置时间间隔、动画类型、宽高度等属性
        carousel.render({
            elem: '#lock_carousel',
            interval: 5000,
            anim: 'default',//fade
            width: '400px',
            height: '300px'
        });
    });

Echarts组件开发

图标封装

    function getEcharts(id, name, norm) {
        var myChart = echarts.init(document.getElementById(id));
        var option = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}MPa"
            },
            series: [{
                name: '管道压力',
                type: 'gauge',
                radius: '98%',
                pointer: {
                    show: true,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#FFC600' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#0B95FF' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                },
                data: [{
                    value: norm,
                    name: name
                }],
                detail: {
                    formatter: '{value} Mpa',
                    fontSize: 16,
                    offsetCenter: [0, '-16%'],
                },
                title: {
                    show: true,
                    offsetCenter: [0, '96%'], // x, y，单位px
                    textStyle: {
                        color: '#000',
                        fontSize: 18
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0.1,
                                color: "#FFC600"
                            },
                                {
                                    offset: 0.6,
                                    color: "#30D27C"
                                },
                                {
                                    offset: 1,
                                    color: "#0B95FF"
                                }
                            ])]
                        ]

                    }
                }
            }]
        };

        myChart.setOption(option, true);
    }

数据格式规范

   var data = [
        {id: 1, name: '金瀚幼儿园', value: 17.6},
        {id: 2, name: '北航小学', value: 27.6},
        {id: 3, name: '平沙二中', value: 37.6},
        {id: 4, name: '平沙一中', value: 47.6},
        {id: 5, name: '金湾一中', value: 57.6},
        {id: 6, name: '金湾二中', value: 67.6},
        {id: 7, name: '金湾三中', value: 77.6},
        {id: 8, name: '金湾四中', value: 27.6},
        {id: 9, name: '金瀚幼儿园', value: 17.6},
        {id: 10, name: '北航小学', value: 27.6},
        {id: 11, name: '平沙二中', value: 37.6},
        {id: 12, name: '平沙一中', value: 47.6},
        {id: 13, name: '金湾一中', value: 57.6},
        {id: 14, name: '金湾二中', value: 67.6},
        {id: 15, name: '金湾三中', value: 77.6}
    ]

    // 使用函数进行分组，每两个元素一组
    var chunkedData = chunkArray(data, 2);

   var ecHtml = '';
    for (var i = 0; i < chunkedData.length; i++) {
        var arrHtml = '';
        if (chunkedData[i][1] != undefined) {
            arrHtml = '<div class="right-ec" id="chart' + chunkedData[i][1].id + '"></div></div>';
        }
        ecHtml += '<div><div class="left-ec" id="chart' + chunkedData[i][0].id + '"></div>' + arrHtml;
    }
    $("#lock_box").html(ecHtml);

    // 初始化ECharts图表
    //循环遍历图表
    for (var n = 0; n < data.length; n++) {
        getEcharts("chart" + data[n].id, data[n].name, data[n].value);
    }

    function chunkArray(array, chunkSize) {
        // 使用reduce方法进行分组
        return array.reduce((resultArray, item, index) => {
            const chunkIndex = Math.floor(index / chunkSize);

            if (!resultArray[chunkIndex]) {
                resultArray[chunkIndex] = []; // 初始化分组数组
            }

            resultArray[chunkIndex].push(item);
            return resultArray;
        }, []);
    }

---

@漏刻有时