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.mzph.cn/news/791794.shtml

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

相关文章

Android开发之View Binding全面解析

引言 在安卓开发中&#xff0c;视图绑定是一个关键的步骤&#xff0c;它允许开发者将布局文件中的视图组件与Activity或Fragment中的成员变量关联起来。这一机制不仅使得UI操作更加便捷&#xff0c;而且提高了开发效率。本文主要探讨了安卓开发中的一项重要技术——View Bindin…

【Qt】使用Qt实现Web服务器(十):前端基础

1、简述 本人对HTML元素不熟悉,利用QtWebApp加载静态页面来熟悉下HTML元素。 2、测试代码 # a)main中创建 HttpListener new HttpListener(listenerSettings,new RequestMapper(&app),&app);#

js教程(11)

一、Window对象 1.BOM&#xff08;浏览器对象模型&#xff09; BOM&#xff08;Browser Object Model&#xff09;是JavaScript中用来与浏览器交互的一组对象。BOM提供了访问和控制浏览器窗口、历史记录、定时器、以及与浏览器进行通信的能力。 BOM包括以下一些常用的对象&…

【Rust】——生命周期

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

PyQt6猜数字小游戏

PyQt6猜数字小游戏 本文使用pyQt6实现猜数字小游戏。游戏开始给出数字范围&#xff0c;猜测失败缩写给定范围。 import math import sys import random from PyQt6.QtWidgets import QMainWindow, QApplication, QMessageBox from PyQt6.QtCore import Qt from sample import U…

AI 在医疗保健领域的应用:技术、趋势和前景

人工智能&#xff08;AI&#xff09;在医疗保健领域的应用已经成为引人瞩目的发展方向&#xff0c;其在医学影像分析、疾病诊断和个性化治疗等方面展现出了巨大潜力。本文将深入探讨这些技术应用和未来的发展趋势。 医学影像分析 医学影像分析是AI在医疗领域中应用最广泛的领…

Redis 缓存雪崩、穿透、击穿、预热

在实际工程中&#xff0c;Redis 缓存问题常伴随高并发场景出现。例如&#xff0c;电商大促、活动报名、突发新闻时&#xff0c;由于缓存失效导致大量请求访问数据库&#xff0c;导致雪崩、击穿、穿透等问题。因此&#xff0c;新系统上线前需预热缓存&#xff0c;以应对高并发&a…

文献阅读:将条形码神经解剖学与空间转录分析相结合,可以识别投射神经元相关基因

文献介绍 「文献题目」 Integrating barcoded neuroanatomy with spatial transcriptional profiling enables identification of gene correlates of projections 「研究团队」 Anthony M. Zador&#xff08;美国冷泉港实验室&#xff09; 「发表时间」 2021-05-10 「发表期…

# #一眼就解密

BUUCTF #一眼就解密 1 下面的字符串解密后便能获得flag&#xff1a;ZmxhZ3tUSEVfRkxBR19PRl9USElTX1NUUklOR30 注意&#xff1a;得到的 flag 请包上 flag{} 提交 flag{THE_FLAG_OF_THIS_STRING}

MPLS-基础、LSR、LSP、标签、体系结构

MPLS技术 MPLS基础 MPLS&#xff1a;转发数据时&#xff0c;只在网络边缘分析IP报文头&#xff0c;不在每一跳都分析&#xff0c;节约了转发时间。 MPLS&#xff1a;Multiprotocol Label Switching&#xff0c;多协议标签交换骨干网技术。主要应用&#xff1a;VPN、流量工程…

Golang学习系列1-pprof性能调优

1. pprof 简述 一位亦师亦友的话让我记忆犹新&#xff0c;他说“学习一个新事务&#xff0c;应该从三个方面入手what,why,how;且三者的重要程度应该是递减”。所以在本文的第一部分先叙述下pprof的what & why。 1.1 What&#xff1f; pprof是golang自身提供的一种性能分…

【C++入门】初识C++

&#x1f49e;&#x1f49e; 前言 hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#x…

稀疏矩阵的三元组表表示法及其转置

1. 什么是稀疏矩阵 稀疏矩阵是指矩阵中大多数元素为零的矩阵。 从直观上讲&#xff0c;当元素个数低于总元素的30%时&#xff0c;这样的矩阵被称为稀疏矩阵。 由于该种矩阵的特点&#xff0c;我们在存储这种矩阵时&#xff0c;如果直接采用二维数组&#xff0c;就会十分浪费…

开启 Keep-Alive 可能会导致http 请求偶发失败

大家好&#xff0c;我是蓝胖子&#xff0c;说起提高http的传输效率&#xff0c;很多人会开启http的Keep-Alive选项&#xff0c;这会http请求能够复用tcp连接&#xff0c;节省了握手的开销。但开启Keep-Alive真的没有问题吗&#xff1f;我们来细细分析下。 最大空闲时间造成请求…

C++Date类的实现

目录 前言&#xff1a; 1.显示日期 2.构造函数与获取某年某月的日期的函数 3.日期比较 4.日期加减天数 5.日期减日期 6.前置后置与-- 7.完整代码 8.测试 总结&#xff1a; 感谢支持&#xff01; 前言&#xff1a; 结合了前面的内容的学习&#xff0c;本篇来对之前的…

基于php医院预约挂号系统

摘 要 随着信息时代的来临&#xff0c;过去的管理方式缺点逐渐暴露&#xff0c;对过去的医院预约挂号管理方式的缺点进行分析&#xff0c;采取计算机方式构建医院预约挂号系统。本文通过阅读相关文献&#xff0c;研究国内外相关技术&#xff0c;开发并设计一款医院预约挂号系统…

语义分割交互式智能标注工具 | 澳鹏数据标注平台

随着人工智能应用的大规模落地&#xff0c;数据标注市场在高速增长的同时&#xff0c;也面临着标注成本的挑战。据IDC报告显示&#xff1a;数据标注在AI应用开发过程中所耗费的时间占到了25%&#xff0c;部分医学类应用一条数据的标注成本甚至高达20元。数据精度的高要求、强人…

【Flink技术原理构造及特性】

1、Flink简介 Flink是一个批处理和流处理结合的统一计算框架&#xff0c;其核心是一个提供了数据分发以及并行化计算的流数据处理引擎。它的最大亮点是流处理&#xff0c;是业界最顶级的开源流处理引擎。 Flink最适合的应用场景是低时延的数据处理&#xff08;Data Processin…

爬虫实战三、PyCharm搭建Scrapy开发调试环境

#一、环境准备 Python开发环境以及Scrapy框架安装&#xff0c;参考&#xff1a;爬虫实战一、Scrapy开发环境&#xff08;Win10Anaconda&#xff09;搭建 PyCharm安装和破解&#xff0c;参考&#xff1a;爬虫实战二、2019年PyCharm安装&#xff08;激活到2100年&#xff09; …

音视频过滤器实战--音频混音

1、添加并初始化音频输入、输出流 2、打开输入、输出音频文件 3、添加音频帧数据&#xff0c;然后循环获取输出的音频帧&#xff0c;将音频数据写文件保存 4、代码实例 audiomixer.h #ifndef AUDIOMIXER_H #define AUDIOMIXER_H#include <map> #include <mutex&g…