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

echarts 之 科技感进度条

1.图片展示

在这里插入图片描述

2.代码实现

/* ng qty 进度条 */
<template><div class="ngqty-progress"><div class="ngqty-info"><span>X4</span><span>50%</span></div><div :id="'barNgQtyProgress' + index" class="chart"></div></div>
</template>
<script>
import echarts from "echarts";export default {name: "bar-ngqty-progress",props: {index: {type: String, // String, Number, Objectrequired: false,default: "0",},data: {},},data() {return {chart: {},};},methods: {initChart() {this.chart = echarts.init(document.getElementById("barNgQtyProgress" + this.index));let category = [{ name: "省外资金", value: "50" }]; // 类别let total = 100; // 数据总数var datas = [];category.forEach((value) => {datas.push(value.value);});let option = {grid: {left: "0",top: "center", // 设置条形图的边距right: "0",},xAxis: {max: total,show: false,},yAxis: [{type: "category",inverse: false,data: category,show: false,},],series: [{// 内type: "bar",stack: "1",barWidth: 15,legendHoverLink: false,silent: true,itemStyle: {normal: {color: function () {return {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "#011b26", // 0% 处的颜色},{offset: 1,color: "#45f2c8", // 100% 处的颜色},],};},},},data: category,z: 1,animationEasing: "elasticOut",},{// 分隔type: "pictorialBar",itemStyle: {normal: {color: "#052132",},},symbolRepeat: "true",symbolMargin: "90 !",symbol: "rect",symbolClip: true,symbolSize: [10, 28],symbolPosition: "start",symbolOffset: [1, -1],symbolBoundingData: this.total,data: category,z: 2,animationEasing: "elasticOut",},],};// 绘制图表this.chart.setOption(option, true);window.addEventListener("resize", () => {if (this.chart) {this.chart.resize(); // 不报错}});},},mounted() {this.initChart();},
};
</script>
<style lang="less" scoped>
.ngqty-progress {width: 98%;height: 100%;.ngqty-info {height: 30px;width: 100%;margin-bottom: 10px;span {color: #4bf9ef;font-size: 30px;font-weight: bold;display: inline-block;&:nth-child(2) {float: right;}}}.chart {width: 100% !important;height: calc(100% - 45px) !important;}#barNgQtyProgress0 {padding: 5px 10px;border: 1px solid #44837d;border-right: 4px solid #44837d;border-left: 4px solid #44837d;}
}
</style>

相关文章:

echarts 之 科技感进度条

1.图片展示 2.代码实现 /* ng qty 进度条 */ <template><div class"ngqty-progress"><div class"ngqty-info"><span>X4</span><span>50%</span></div><div :id"barNgQtyProgress index" c…...

基于gin关于多级菜单的处理

多级菜单是很多业务场景需要的。下面是一种处理方式 // 生成树结构 func tree(menus []*video.XkVideoCategory, parentId uint) []*video.XkVideoCategory {//定义子节点目录var nodes []*video.XkVideoCategoryif reflect.ValueOf(menus).IsValid() {//循环所有一级菜单for …...

Oracle/PL/SQL奇技淫巧之Lable标签与循环控制

在一些存储过程场景中&#xff0c;可能存在需要在满足某些条件时跳出循环的场景&#xff0c; 但是在PL/SQL中&#xff0c;不能使用break语句直接跳出循环, 但是可以通过lable标签的方式跳出循环&#xff0c;例&#xff1a; <<outer_loop>> FOR i IN 1..5 LOOPDBMS…...

Docker基础操作

1.安装docker服务&#xff0c;配置镜像加速器 安装docker服务 清理缓存 sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-enginesystemctl enable --now docker 脚…...

AMBA总线协议(8)——AHB(六):分割传输

一、前言 在之前的文章中&#xff0c;我们重点介绍了AHB传输的仲裁&#xff0c;首先介绍了仲裁相关的信号&#xff0c;然后分别介绍了请求总线访问&#xff0c;授权总线访问&#xff0c;猝发提前终止&#xff0c;锁定传输和默认主机总线&#xff0c;在本文中我们将继续介绍AHB的…...

时序分解 | MATLAB实现基于SWD群体分解的信号分解分量可视化

时序分解 | MATLAB实现基于SWD群体分解的信号分解分量可视化 目录 时序分解 | MATLAB实现基于SWD群体分解的信号分解分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 基于SWD群体分解的分量可视化&#xff0c;基于群体分解的信号分解技术&#xff0c;MATLAB程序…...

【makefile】自动化变量的简述及实例

文章目录 10. env20. 简述百度百科常用的自动化变量 30. 实例90. 附件下载 10. env ubuntu1804 GNU Make 4.120. 简述 百度百科 https://baike.baidu.com/item/Makefile/4619787?frge_ala makefile 文件的格式&#xff1a; 目标&#xff1a;依赖命令软件编译的流程概述&am…...

IntelliJ IDEA 官方网站 idea官网 http://www.jetbrains.com/idea/

IntelliJ IDEA 官方网站 idea官网 http://www.jetbrains.com/idea/ Idea下载官网一键直达&#xff1a; 官网一键直达...

C#,《小白学程序》第一课:初识程序

曰&#xff1a;扫地僧练就绝世武功的目的是为了扫地更干净。 1 文本格式 /// <summary> /// 《小白学程序》第一课&#xff1a;初识程序 /// </summary> /// <param name"sender"></param> /// <param name"e"></param&…...

LeetCode--HOT100题(38)

目录 题目描述&#xff1a;226. 翻转二叉树&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;226. 翻转二叉树&#xff08;简单&#xff09; 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 LeetCode做题链…...

C语言:指针(超深度讲解)

目录 指针&#xff1a; 学习目标&#xff1a; 指针可以理解为&#xff1a; 字符指针&#xff1a; 定义&#xff1a;字符指针 char*。 字符指针的使用&#xff1a; 练习&#xff1a; 指针数组&#xff1a; 概念&#xff1a;指针数组是一个存放指针的数组。 实现模拟二维…...

Docker详解

文章目录 Docker详解一、Docker简介什么是容器 &#xff1f;容器技术有哪些优点 &#xff1f;什么是Docker &#xff1f;Docker的特点Docker的使用场景 二、Docker的基本组成Docker 客户端 / 守护进程Docker Image 镜像Docker Container 容器Docker Registry 仓库 三、Docker 依…...

软件开发方法:复用与扩展

软件开发方法&#xff1a;复用与扩展 一、面向对象二、进一步认识 一、面向对象 封装 工程上的意义&#xff1a;屏蔽细节&#xff0c;隔离变化 public、protected、private 继承 工程上的意义&#xff1a;复用 多态工程上的意义&#xff1a;高内聚&#xff0c;低耦合 —— 面…...

C++新经典09--函数新特性、inline内联函数与const详解

函数回顾与后置返回类型 函数定义中如果有形参则形参应该有名字&#xff0c;而不光是只有类型&#xff0c;但是如果并不想使用这个形参&#xff0c;换句话说这个形参并不在这个函数中使用&#xff0c;则不给形参名也可以&#xff0c;但在调用这个函数的时候&#xff0c;该位置…...

C++中机器人应用程序的行为树(ROS2)

马库斯布赫霍尔茨 一、说明 以下文章为您提供了对机器人应用程序或框架中经常使用的行为树的一般直觉&#xff1a;ROS&#xff0c;Moveit和NAV2。了解行为 Tress &#xff08;BT&#xff09; 框架的原理为您提供了在游戏领域应用知识的绝佳机会。BT可以与Unity或Unreal集成。 由…...

像Vuex一样使用redux

redux基础知识 本篇文章主要介绍redux的基本使用方法&#xff0c;并简单封装&#xff0c;像vuex一样写redux 学习文档 英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux redux是什么 redux和vuex几乎是一…...

关于模板的大致认识【C++】

文章目录 函数模板函数模板的原理函数模板的实例化模板参数的匹配原则 类模板类模板的定义格式类模板的实例化 非类型模板参数typename 与class模板的特化函数模板特化类模板特化全特化偏特化 模板的分离编译 函数模板 函数模板的原理 template <typename T> //模板参数…...

C#如何遍历类的属性,并获取描述/注释

要获取属性的描述/注释&#xff0c;需要使用System.ComponentModel命名空间中的DescriptionAttribute。可以通过反射获取属性上的DescriptionAttribute&#xff0c;并获取其Description属性值。 首先&#xff0c;需要引入System.ComponentModel命名空间&#xff1a; using Sy…...

ffmpeg 子进程从内存读取文件、提取图片到内存

除了网络、文件io&#xff0c;由python或java或go或c等语言开启的ffmpeg子进程还支持pipe&#xff0c;可以从stdin读入数据&#xff0c;输出转化后的图像到stdout。无需编译 ffmpeg&#xff0c;直接调用 ffmpeg.exe不香么&#xff01; “从内存读”可用于边下载边转码&#xf…...

Springboot+Netty+WebSocket搭建简单的消息通知

SpringbootNettyWebSocket搭建简单的消息通知 一、快速开始 1、添加依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.36.Final</version> </dependency> <dependency>…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

VisualXML全新升级 | 新增数据库编辑功能

VisualXML是一个功能强大的网络总线设计工具&#xff0c;专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑&#xff08;如DBC、LDF、ARXML、HEX等&#xff09;&#xff0c;并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...