当前位置：首页 > news >正文

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

news 2025/8/23 9:06:43

在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',//fadewidth: '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，单位pxtextStyle: {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;}, []);}