当前位置: 首页 > news >正文

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象形柱图实现电量效果柱状图 接着我们实现进阶版&#xff0c;增加渐变效果 echarts分割柱形图实现渐变电量效果柱状图 接着是又在渐变的基础上&#xff0c;增加了背景色块的填充 echarts实现渐变电量效果柱状图 其实思路是一…...

FileManager/本地文件增删改查, Cache/图像缓存处理 的操作

1. FileManager 本地文件管理器&#xff0c;增删改查文件 1.1 实现 // 本地文件管理器 class LocalFileManager{// 单例模式static let instance LocalFileManager()let folderName "MyApp_Images"init() {createFolderIfNeeded()}// 创建特定应用的文件夹func cr…...

vue中使用富文本编辑器

vue中使用富文本编辑器&#xff08;wangEditor&#xff09; wangEditor官网地址&#xff1a;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中状态适配

写一个函数&#xff0c;在函数中定义一个对象 用于存放键值对&#xff0c;最后返回指定状态所对应的的值&#xff0c;即对象[指定状态] 的 对象的值。 在模板中把状态传入 // vue3 setup语法糖中 const formatXXXState (xxxState)>{const stateMap {键1: 值1,键2: 值2,.…...

uniapp h5 端 router.base设置history后仍有#号

manifest.json文件设置&#xff1a; "h5": { "router": { "base": "./", "mode": "history" }, }按相对路径发行时路由模式强制为hash模式&#xff0c;不支持history模式&#xff08;两者相悖&#xff09;…...

上网行为监管软件(上网行为管理软件通常具有哪些功能)

在我们的日常生活中&#xff0c;互联网已经成为了我们获取信息、交流思想、进行工作和娱乐的重要平台。然而&#xff0c;随着互联网的普及和使用&#xff0c;网络安全问题也日益突出&#xff0c;尤其是个人隐私保护和网络行为的规范。在这个背景下&#xff0c;上网行为审计软件…...

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 对象用于表示一个异步操作的最终完成&#xff08;或失败&#xff09;及其结果值。是异步编程的一种解决方案&#xff08;可以解决回调地狱问题&#xff09;。 一个 Promise 对象代表一个在这…...

【Git】配置SSH密钥实现Git操作免密

背景 在使用Git推送代码的时候&#xff0c;会默认需要输入密码。如果经常推送代码&#xff0c;那就需要经常输入密码&#xff0c;比较繁琐。所以Git也提供了免密登录的功能。 Git本身支持两种协议对远程Git仓库进行访问&#xff1a;HTTPS、SSH。两种方式有一定的区别&#xf…...

AI能给百融云带来什么?

一大堆有关ChatGPT的利好消息出现之后&#xff0c;市场的反应难得的跟投资者预期站在了一起&#xff0c;AIGC也终于有了跑赢CPO的苗头。二级市场的逻辑不用重复&#xff0c;毕竟AI已经炒了大半年&#xff0c;但有没有发现一个问题&#xff1f;就是在不知不觉中&#xff0c;AI应…...

AI创作系统ChatGPT商业运营版源码+AI绘画/支持GPT联网提问/支持Midjourney绘画+Prompt应用+支持国内AI提问模型

一、AI创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&am…...

vue.draggable拖拽,项目中三个表格互相拖拽的实例操作,前端分页等更多小技巧~

vue.draggable中文文档 - itxst.com官网在这里&#xff0c;感兴趣的小伙伴可以看看。 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光模块:数据中心应用全攻略

在当今数字化时代&#xff0c;对于企业和供应商来说&#xff0c;高速数据传输至关重要。随着对更快数据传输的需求不断攀升&#xff0c;400G DR4 QSFP-DD光模块已经成为高速网络的最新解决方案。本文将全面介绍400G DR4 QSFP-DD光模块在数据中心应用中的优势和技术规范。 什么…...

自动驾驶:路径规划概述

自动驾驶&#xff1a;路径规划概述 全局路径规划Dijkstra算法A*算法RRT&#xff08;随机快速探索树&#xff09;算法PRM&#xff08;概率路线图&#xff09;算法 局部路径规划DWA&#xff08;动态窗口法&#xff09;算法TEB&#xff08;时间弹性带&#xff09;算法Lattice Plan…...

vlc将本地文件推流成ts实时流

推流 打开vlc &#xff0c;打开 媒体----打开网络串流 选择文件选项卡&#xff0c;打开本地文件 点击添加&#xff0c;选择本地的mp3文件 选择串流 点击下拉框&#xff0c;选择udp&#xff0c;点击右边的【添加】按钮 输入媒体流输出地址&#xff0c;点击【下一个】 选择正确的…...

C# 自定义控件库之Lable组合控件

1、创建类库 2、在类库中添加用户控件&#xff08;Window窗体&#xff09; 3、控件视图 4、后台代码 namespace UILib {public partial class DeviceInfoV : UserControl{public DeviceInfoV(){InitializeComponent();ParameterInitialize();}#region 初始化private void Par…...

解密防关联指纹浏览器:联盟营销领域的秘密武器

联盟营销在今天的数字化时代越来越受欢迎。然而&#xff0c;联盟营销也面临着一些挑战&#xff0c;其中之一就是账号关联问题。本文将介绍如何利用防关联指纹浏览器来提升联盟营销的效果和安全性。 一、什么是防关联指纹浏览器&#xff1f; 防关联指纹浏览器是一种工具&#…...

asp.net core mvc Razor +dapper 增删改查,分页(保姆教程)

说明&#xff1a;本demo使用sqlserver数据库&#xff0c;dapper orm框架 完成一张学生信息表的增删改查&#xff0c;前端部分使用的是Razor视图&#xff0c; Linq分页 HtmlHelper。&#xff08;代码随便写的&#xff0c;具体可以自己优化&#xff09; //实现效果如下&#xff0…...

网络安全——自学(黑客)方法

如果你想自学网络安全&#xff0c;首先你必须了解什么是网络安全&#xff01;&#xff0c;什么是黑客&#xff01;&#xff01; 1.无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面性&#xff0c;例如 Web 安全技术&#xff0c;既有 Web 渗透2.也有 Web 防…...

ONLYOFFICE Docs与Nextcloud Calendar集成:打造高效私有云日程协作平台

ONLYOFFICE Docs与Nextcloud Calendar集成&#xff1a;打造高效私有云日程协作平台 【免费下载链接】DocumentServer ONLYOFFICE Docs is a free collaborative online office suite comprising viewers and editors for texts, spreadsheets and presentations, forms and PDF…...

手把手教你用4G Cat.1 bis开发智能硬件:从电路设计到低功耗优化的完整实战

4G Cat.1 bis智能硬件开发实战&#xff1a;从电路设计到低功耗优化的全流程指南 在共享充电宝扫码即用的便利背后&#xff0c;隐藏着一场关于低功耗通信的技术革命。当传统4G模块因高功耗让硬件开发者束手无策时&#xff0c;4G Cat.1 bis以单天线设计、10Mbps传输速率和μA级待…...

黑马点评技术汇总(一)验证码登录

一、session实现验证码登录总思路&#xff1a; 前端提交手机号发起code请求&#xff0c;服务端校验手机号是否符合格式&#xff0c;成功后生成验证码存入session并发送给用户。 用户提交手机号和验证码验证手机是否符合格式&#xff08;这里有个bug&#xff09;验证码是否和ses…...

COMSOL—超声相控阵聚焦仿真 模型介绍:激励函数是由高斯波和正弦波组成的脉冲函数

COMSOL—超声相控阵聚焦仿真 模型介绍&#xff1a;激励函数是由高斯波和正弦波组成的脉冲函数超声相控阵这玩意儿在工业检测和医学影像里玩得可溜了&#xff0c;今天咱们整点硬核的——用COMSOL搞个带高斯调制的超声聚焦仿真。先看这个模型的灵魂所在&#xff1a;激励信号设计。…...

Cursor+Qt5.12.12开发环境配置全攻略:从插件安装到项目构建

CursorQt5.12.12开发环境配置全攻略&#xff1a;从插件安装到项目构建 对于刚接触Qt开发或从其他IDE迁移到Cursor的开发者来说&#xff0c;配置一个高效的开发环境是首要任务。Qt5.12.12作为长期支持版本(LTS)&#xff0c;在稳定性和兼容性方面表现优异&#xff0c;而Cursor作为…...

告别低效写作:盘点2026年标杆级的AI论文网站

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂、实测能大幅提速的AI论文网站&#xff0c;覆盖选题构思、文献整理、内容生成、格式排版全流程&#xff0c;帮你高效搞定论文写作。 一、全流程王者&#xff1a;一站式搞定论文全链路&#xff08;一天定稿首选&#xff…...

FLUX.1文生图优化技巧:SDXL风格节点参数这样调,图片效果更出彩

FLUX.1文生图优化技巧&#xff1a;SDXL风格节点参数这样调&#xff0c;图片效果更出彩 1. 快速上手&#xff1a;FLUX.1文生图工作流基础操作 1.1 工作流启动指南 启动FLUX.1文生图工作流只需简单三步&#xff1a; 在ComfyUI左侧面板找到"FLUX.1-dev-fp8-dit文生图&quo…...

LangGraph 工作流实战:Few-Shot提示赋能大模型精准调用自定义计算工具

1. 为什么需要Few-Shot提示赋能工具调用&#xff1f; 大模型在通用任务上表现惊艳&#xff0c;但遇到需要精确调用自定义工具的场景时&#xff0c;常常会出现"知道但不会用"的情况。比如让GPT-4计算"3172531284724"&#xff0c;它可能直接输出错误答案而非…...

F_Record:让Photoshop绘画过程录制变得简单高效的轻量级插件

F_Record&#xff1a;让Photoshop绘画过程录制变得简单高效的轻量级插件 【免费下载链接】F_Record 一款用来录制绘画过程的轻量级PS插件 项目地址: https://gitcode.com/gh_mirrors/fr/F_Record 在数字艺术创作领域&#xff0c;每一笔笔触都承载着创作者的灵感与思考。…...

LingBot-World:1秒生成16帧!开源世界模型新突破

LingBot-World&#xff1a;1秒生成16帧&#xff01;开源世界模型新突破 【免费下载链接】lingbot-world-base-cam 项目地址: https://ai.gitcode.com/hf_mirrors/robbyant/lingbot-world-base-cam 导语&#xff1a;Robbyant团队发布开源世界模型LingBot-World&#xff…...