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',//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;}, []);}

@漏刻有时

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/593260.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聚合DNS管理系统v1.0全新发布 域名解析管理系统

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 聚合DNS管理系统可以实现在一个网站内管理多个平台的域名解析&#xff0c;目前已支持的域名平台有&#xff1a;阿里云、腾讯云、华为云、西部数码、CloudFlare。本系统支持多用户&…

如何降低AI功耗? —— 超低功耗的仿生硬件

一、背景 仿生硬件&#xff08;Bionic Hardware&#xff09;这一术语通常指的是受自然界的生物系统启发而设计制造的电子或机械硬件设备&#xff0c;它们在功能、结构、材料、能源效率等方面模仿生物体的特性&#xff0c;以实现更高效、智能、自适应或环境友好的性能。在人工智…

逆向基础之数据类型

不同的数据在内存中的存放方式是不同的&#xff0c;我们说内存中每一位只存放了0和1&#xff0c;用来表示整数很容易 例如00000011表示3。 那怎么表示小数怎么表示文字符号呢&#xff1f; 因为我们知道内存里是没有小数点没有文字的。 这就需要不同的存放方式&#xff0c;用…

SAP HCM 多成本中心薪酬过账标准程序解读

SAP HCM薪酬过账会涉及到CO对象&#xff0c;CO对象主要是成本中心、WBS、内部订单、订单等&#xff0c;成本中心有多个维护地方0001信息类型0027信息类型等&#xff0c;那么成本中心多个地方维护&#xff0c;优先级是如何&#xff0c;0027>1018>0001,也就是说人身上的优先…

[计算机知识] 各种小问题思考

哈希算法以及哈希冲突 哈希算法&#xff1a;将任何长度的输入通过散列函数转换成固定长度的字符串 哈希冲突&#xff1a;不同的输入经过哈希函数处理后得到相同的哈希值 因为哈希函数的输出域是有限的 解决哈希冲突&#xff1a; 1. 开放寻址&#xff1a;产生哈希冲突后&…

scRAN-seq|加权最近邻分析(1)

概述 本文[1]介绍了Seurat 5.0.0中的加权最近邻&#xff08;WNN&#xff09;分析方法&#xff0c;这是一种用于整合和分析多模态单细胞数据的无监督框架。 简介 多模态分析作为单细胞基因组学的一个新兴领域&#xff0c;它通过同时测量多种数据类型来精确描绘细胞状态&#xff…

【Unity灶台】食品加工系统模型搭建

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

目标检测——车牌数据集

一、重要性及意义 交通安全与管理&#xff1a;车牌检测和识别技术有助于交通管理部门快速、准确地获取车辆信息&#xff0c;从而更有效地进行交通监控和执法。例如&#xff0c;在违规停车、超速行驶等交通违法行为中&#xff0c;该技术可以帮助交警迅速锁定违规车辆&#xff0…

Golang | Leetcode Golang题解之第10题正则表达式匹配

题目&#xff1a; 题解&#xff1a; func isMatch(s string, p string) bool {m, n : len(s), len(p)matches : func(i, j int) bool {if i 0 {return false}if p[j-1] . {return true}return s[i-1] p[j-1]}f : make([][]bool, m 1)for i : 0; i < len(f); i {f[i] m…

11.python的字典dict(下) 遍历字典,结构优化

11.python的字典dict(下) 遍历所有的键值对 items()方法是字典的一个内置方法&#xff0c;用于返回字典中所有键值对的视图&#xff08;view&#xff09;。它返回一个可迭代的对象&#xff0c;每个元素都是一个包含键和对应值的元组。 下面用一个例子来说明items()方法的用法…

RK3588 NPU 研究(二)

RK提供了两个模型&#xff0c;mobilenet和YOLO5。 mobilenet模型相对小&#xff0c;使用起来不是很明显yolo5模型大一些&#xff0c;可以对88种目标进行检测&#xff0c;提供检测的结果包括类别、包围框坐标、可信度等信息。基于rknn_yolov5_demo进行分析。 rknn_yolov5_demo基…

51单片机入门_江协科技_19~20_OB记录的笔记

19. 串口通讯 19.1. 串口介绍&#xff1a; •串口是一种应用十分广泛的通讯接口&#xff0c;串口成本低、容易使用、通信线路简单&#xff0c;可实现两个设备的互相通信。 •单片机的串口可以使单片机与单片机、单片机与电脑、单片机与各式各样的模块互相通信&#xff0c;极大的…