在Layui中，使用layui-carousel輪播組件嵌套Echarts圖表來實現(xiàn)多個圖表的展示。

css層疊樣式表

• 調整輪播圖背景色為白色；
• 調整當個Echarts圖表顯示loading…狀態(tài)；
• 同一個DIV輪播項目添加多個Echarts的

 .layui-carousel {background-color: #fff !important;}.layui-carousel > [carousel-item] > * {background-color: #fff;}/* 隱藏輪播加載狀態(tài) */.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組件開發(fā)

圖標封裝

    function getEcharts(id, name, norm) {var myChart = echarts.init(document.getElementById(id));var option = {tooltip: {formatter: "{a} <br/> : {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);}

數(shù)據(jù)格式規(guī)范

   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}]// 使用函數(shù)進行分組，每兩個元素一組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圖表//循環(huán)遍歷圖表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] = []; // 初始化分組數(shù)組}resultArray[chunkIndex].push(item);return resultArray;}, []);}

---

@漏刻有時