在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;
}, []);
}
@漏刻有时