css实现渐变电量效果柱状图
我们通常的做法就是用echarts来实现
比如
echarts象形柱图实现电量效果柱状图

接着我们实现进阶版,增加渐变效果
echarts分割柱形图实现渐变电量效果柱状图

接着是又在渐变的基础上,增加了背景色块的填充
echarts实现渐变电量效果柱状图

其实思路是一致的,就是效果层的叠加
以上,就是在项目中实际会用到的效果
如果你只是想做一个静态demo,不需要数据,不需要后台,这里教你一个简单快捷的方法,用css实现!
实现效果如下↓

相关代码:
<template><!--css实现电量效果--><div class="panel"><div class="content"><div class="legend"><div class="legend-item"><span class="legend-icon" style="background:linear-gradient(0deg,rgba(247,240,42,1),rgba(255,84,84,1));"></span><span class="legend-label">报修</span></div><div class="legend-item"><span class="legend-icon" style="background:linear-gradient(0deg,rgba(22,233,16,1),rgba(22,230,247,1));"></span><span class="legend-label">维护</span></div></div><div class="chart"><div class="chart-item" v-for="(item,index) in datas"><div class="chart-bg"><span class="char-bg-item" v-for="n in 12" v-bind:style="char_bg_item_style1(item,n)"></span></div><div class="chart-bg"><span class="char-bg-item" v-for="n in 12" v-bind:style="char_bg_item_style2(item,n)"></span></div><div class="chart-label">{{item.label}}</div></div></div></div></div>
</template>
<script>
import gradient from "@/lib/GradientColor.js";export default {name: "BatteryCss",data() {return {maxValue: 30,datas: [{ label: "2023/01", fix: 10, mainten: 12 },{ label: "2023/02", fix: 8, mainten: 6 },{ label: "2023/03", fix: 4, mainten: 8 },{ label: "2023/04", fix: 7, mainten: 5 },{ label: "2023/05", fix: 4, mainten: 6 },{ label: "2023/06", fix: 2, mainten: 3 },],};},methods: {char_bg_item_style1(item, n) {if (n <= 12 - item.fix) {return {backgroundColor: "#D9D9D9",};} else {return {//渐变色backgroundColor: gradient("#F0E82C", "#EF7E5D", 12, n),};}},char_bg_item_style2(item, n) {if (n <= 12 - item.mainten) {return {backgroundColor: "#D9D9D9",};} else {return {//渐变色backgroundColor: gradient("#25E2F2", "#19E419", 12, n),};}},},
};
</script>
<style scoped>
.panel {width: 500px;background: #1c242b;
}
.legend {height: 32px;width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center;line-height: 32px;
}.legend-item {width: 80px;
}.legend-icon {width: 18px;height: 12px;border-radius: 2px;display: inline-block;
}.legend-label {font-size: 12px;color: #aaa;margin-left: 10px;
}.chart {width: 100%;height: calc(100% - 32px);display: flex;flex-direction: row;justify-content: space-around;align-items: center;
}.chart-item {width: 72px;height: 124px;
}.chart-bg {position: relative;top: 14px;left: 14px;width: 18px;height: 81px;display: flex;flex-direction: column;justify-content: space-between;float: left;margin-left: 2px;
}.char-bg-item {height: 4px;width: 18px;display: inline-block;background: #d9d9d9;
}.chart-label {height: calc(124px - 81px);font-size: 14px;color: #a5a6a6;position: relative;top: 20px;text-align: center;
}
</style>
版本信息↓

思路很简单,就是循环画一个一个小块块
相关文章:
css实现渐变电量效果柱状图
我们通常的做法就是用echarts来实现 比如 echarts象形柱图实现电量效果柱状图 接着我们实现进阶版,增加渐变效果 echarts分割柱形图实现渐变电量效果柱状图 接着是又在渐变的基础上,增加了背景色块的填充 echarts实现渐变电量效果柱状图 其实思路是一…...
FileManager/本地文件增删改查, Cache/图像缓存处理 的操作
1. FileManager 本地文件管理器,增删改查文件 1.1 实现 // 本地文件管理器 class LocalFileManager{// 单例模式static let instance LocalFileManager()let folderName "MyApp_Images"init() {createFolderIfNeeded()}// 创建特定应用的文件夹func cr…...
vue中使用富文本编辑器
vue中使用富文本编辑器(wangEditor) wangEditor官网地址:https://www.wangeditor.com/ 使用示例 <template><div class"app-container"><div class"box"><div class"editor-tool">&l…...
13.(开发工具篇github)如何在GitHub上上传本地项目
一:创建GitHub账户并安装Git 二:创建一个新的仓库(repository) 三、拉取代码 git clone https://github.com/ainier-max/myboot.git git clone git@github.com:ainier-max/myboot.git四、拷贝代码到拉取后的工程 五、上传代码 (1)添加所有文件到暂存...
vue3中状态适配
写一个函数,在函数中定义一个对象 用于存放键值对,最后返回指定状态所对应的的值,即对象[指定状态] 的 对象的值。 在模板中把状态传入 // vue3 setup语法糖中 const formatXXXState (xxxState)>{const stateMap {键1: 值1,键2: 值2,.…...
uniapp h5 端 router.base设置history后仍有#号
manifest.json文件设置: "h5": { "router": { "base": "./", "mode": "history" }, }按相对路径发行时路由模式强制为hash模式,不支持history模式(两者相悖)…...
上网行为监管软件(上网行为管理软件通常具有哪些功能)
在我们的日常生活中,互联网已经成为了我们获取信息、交流思想、进行工作和娱乐的重要平台。然而,随着互联网的普及和使用,网络安全问题也日益突出,尤其是个人隐私保护和网络行为的规范。在这个背景下,上网行为审计软件…...
C#中的for和foreach的探究与学习
一:语句及表示方法 for语句: for(初始表达式;条件表达式;增量表达式) {循环体 }foreach语句: foreach(数据类型 变量 in 数组或集合) {循环体 }理解 1.从程序逻辑上理解,foreach是通过指针偏移实现的(最初在-1位置,每循环一次,指针就便宜一个单位),而for循环是通...
【ES6知识】Promise 对象
文章目录 1.1 概述1.2 静态方法1.3 实例方法1.4 Promise 拒绝事件 1.1 概述 Promise 对象用于表示一个异步操作的最终完成(或失败)及其结果值。是异步编程的一种解决方案(可以解决回调地狱问题)。 一个 Promise 对象代表一个在这…...
【Git】配置SSH密钥实现Git操作免密
背景 在使用Git推送代码的时候,会默认需要输入密码。如果经常推送代码,那就需要经常输入密码,比较繁琐。所以Git也提供了免密登录的功能。 Git本身支持两种协议对远程Git仓库进行访问:HTTPS、SSH。两种方式有一定的区别…...
AI能给百融云带来什么?
一大堆有关ChatGPT的利好消息出现之后,市场的反应难得的跟投资者预期站在了一起,AIGC也终于有了跑赢CPO的苗头。二级市场的逻辑不用重复,毕竟AI已经炒了大半年,但有没有发现一个问题?就是在不知不觉中,AI应…...
AI创作系统ChatGPT商业运营版源码+AI绘画/支持GPT联网提问/支持Midjourney绘画+Prompt应用+支持国内AI提问模型
一、AI创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧&am…...
vue.draggable拖拽,项目中三个表格互相拖拽的实例操作,前端分页等更多小技巧~
vue.draggable中文文档 - itxst.com官网在这里,感兴趣的小伙伴可以看看。 NPM或yarn安装方式 yarn add vuedraggable npm i -S vuedraggable UMD浏览器直接引用JS方式 <script src"https://www.itxst.com/package/vue/vue.min.js"></script&…...
400G DR4 QSFP-DD光模块:数据中心应用全攻略
在当今数字化时代,对于企业和供应商来说,高速数据传输至关重要。随着对更快数据传输的需求不断攀升,400G DR4 QSFP-DD光模块已经成为高速网络的最新解决方案。本文将全面介绍400G DR4 QSFP-DD光模块在数据中心应用中的优势和技术规范。 什么…...
自动驾驶:路径规划概述
自动驾驶:路径规划概述 全局路径规划Dijkstra算法A*算法RRT(随机快速探索树)算法PRM(概率路线图)算法 局部路径规划DWA(动态窗口法)算法TEB(时间弹性带)算法Lattice Plan…...
vlc将本地文件推流成ts实时流
推流 打开vlc ,打开 媒体----打开网络串流 选择文件选项卡,打开本地文件 点击添加,选择本地的mp3文件 选择串流 点击下拉框,选择udp,点击右边的【添加】按钮 输入媒体流输出地址,点击【下一个】 选择正确的…...
C# 自定义控件库之Lable组合控件
1、创建类库 2、在类库中添加用户控件(Window窗体) 3、控件视图 4、后台代码 namespace UILib {public partial class DeviceInfoV : UserControl{public DeviceInfoV(){InitializeComponent();ParameterInitialize();}#region 初始化private void Par…...
解密防关联指纹浏览器:联盟营销领域的秘密武器
联盟营销在今天的数字化时代越来越受欢迎。然而,联盟营销也面临着一些挑战,其中之一就是账号关联问题。本文将介绍如何利用防关联指纹浏览器来提升联盟营销的效果和安全性。 一、什么是防关联指纹浏览器? 防关联指纹浏览器是一种工具&#…...
asp.net core mvc Razor +dapper 增删改查,分页(保姆教程)
说明:本demo使用sqlserver数据库,dapper orm框架 完成一张学生信息表的增删改查,前端部分使用的是Razor视图, Linq分页 HtmlHelper。(代码随便写的,具体可以自己优化) //实现效果如下࿰…...
网络安全——自学(黑客)方法
如果你想自学网络安全,首先你必须了解什么是网络安全!,什么是黑客!! 1.无论网络、Web、移动、桌面、云等哪个领域,都有攻与防两面性,例如 Web 安全技术,既有 Web 渗透2.也有 Web 防…...
云效流水线实战:从零部署Java应用到阿里云ECS(含完整脚本)
云效流水线实战:从零部署Java应用到阿里云ECS(含完整脚本) 在当今快节奏的软件开发环境中,自动化部署已成为提升团队效率的关键环节。阿里云云效平台提供的流水线功能,为开发者提供了一套完整的CI/CD解决方案ÿ…...
Boss-Key老板键:如何用3分钟掌握一键隐藏窗口的终极技巧
Boss-Key老板键:如何用3分钟掌握一键隐藏窗口的终极技巧 【免费下载链接】Boss-Key 老板来了?快用Boss-Key老板键一键隐藏静音当前窗口!上班摸鱼必备神器 项目地址: https://gitcode.com/gh_mirrors/bo/Boss-Key 你是否经历过这样的时…...
PX4飞控开发实战指南:从环境搭建到自主飞行
PX4飞控开发实战指南:从环境搭建到自主飞行 【免费下载链接】PX4-Autopilot PX4 Autopilot Software 项目地址: https://gitcode.com/gh_mirrors/px/PX4-Autopilot 一、认知铺垫:无人机大脑如何工作? 你是否好奇无人机如何在空中保持…...
DAMO-YOLO部署教程:SSL证书配置与HTTP自动跳转HTTPS设置
DAMO-YOLO部署教程:SSL证书配置与HTTP自动跳转HTTPS设置 1. 引言 当你成功部署了DAMO-YOLO智能视觉探测系统后,可能会发现浏览器提示"不安全"的警告。这是因为默认的HTTP协议缺乏加密保护,对于涉及图像处理的AI系统来说ÿ…...
ESP32远程识别模块完整指南:如何实现无人机合规飞行
ESP32远程识别模块完整指南:如何实现无人机合规飞行 【免费下载链接】ArduRemoteID RemoteID support using OpenDroneID 项目地址: https://gitcode.com/gh_mirrors/ar/ArduRemoteID 随着全球无人机法规日益严格,FAA和欧盟都要求无人机必须配备专…...
行业观察2026年3月五家geo优化服务商实测对比与选型决策指南
在2026年3月的智能商业环境中,企业竞争的焦点已从信息曝光转向认知塑造。随着生成式AI全面接管用户的信息获取与决策流程,品牌若无法在AI的“思考”过程中占据一席之地,便意味着在未来的商业对话中失语。第三方独立数据显示,2025年…...
告别8小时UI适配工作:3大核心能力重新定义Figma到Unity流程
告别8小时UI适配工作:3大核心能力重新定义Figma到Unity流程 【免费下载链接】UnityFigmaBridge Easily bring your Figma Documents, Components, Assets and Prototypes to Unity 项目地址: https://gitcode.com/gh_mirrors/un/UnityFigmaBridge 在游戏开发…...
pyNastran:工程仿真领域的Python变革者——打破商业软件垄断的技术突围
pyNastran:工程仿真领域的Python变革者——打破商业软件垄断的技术突围 【免费下载链接】pyNastran A Python-based interface tool for Nastrans file formats 项目地址: https://gitcode.com/gh_mirrors/py/pyNastran 价值定位:重新定义工程仿真…...
RDK X5上800万像素摄像头延迟从7秒降到200ms:我的5个月踩坑与优化实录
RDK X5高分辨率摄像头优化实战:从7秒延迟到200ms的性能飞跃 深夜的显示器前,我盯着屏幕上缓慢刷新的图像——32642448分辨率下,每按一次快门要等待7秒才能看到结果。作为一名在嵌入式视觉领域摸爬滚打多年的开发者,这种性能表现简…...
深入 Spring 源码,剖析设计模式的落地实践
写在文章开头 阅读源码是理解框架最有效的方式之一,Spring 源码中蕴含了大量设计模式的经典应用。本文将从源码层面深入剖析这些设计模式,带你理解框架设计精髓,掌握在实际项目中灵活运用的能力。 你好,我是 SharkChili ,Java Guide 核心维护者之一,对 Redis、Nighting…...
