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>

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

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

相关文章

Java进阶(7)——手动实现LinkedList 内部node类的实现 增删改查的实现 toString方法 源码的初步理解

目录 引出从ArrayList到Linkedlist手动实现ArrayList从ArrayList到LinkedList 总体设计Node类Node的方法&#xff1a;根据index找node 增删改查的实现增加元素删除元素修改元素查询元素 toString方法完整代码List接口类LinkedList的实现测试类 总结 引出 1.linkedList的节点&am…

基于JJWT理解JWT,JWS,JWE

JWT &#xff0c; 全写JSON Web Token, 是开放的行业标准RFC7591&#xff0c;用来实现端到端安全验证. 从开发者理解的角度来说&#xff1a; JWT 是一个定义传递信息的标准JWT 的Token是一个Base64编码的字符串&#xff0c; 类似 eyJhbGciOiJIUzI1NyJ9.eyJzdWIiOiJvc2NhciJ9.…

房屋结构健康监测,科技助力让建筑更安全

房屋建筑是人们赖以生存的场所&#xff0c;然而当前我国许多房屋已经达到了使用寿命的中期&#xff0c;房屋的安全系数逐年降低&#xff0c;风险也随着时间的推移而累积。长期以来&#xff0c;我国的房屋普遍存在寿命短、隐患多的问题&#xff0c;“重建设&#xff0c;轻管理”…

探索PDF校对:为何这是现代数字文档的关键步骤

在今日的数字化浪潮中&#xff0c;文档的创建与分享从未如此频繁。尤其是PDF&#xff0c;作为一个普遍接受的标准文件格式&#xff0c;其在企业、学术和日常生活中的应用已经无处不在。但随之而来的挑战是如何确保文档的准确性和专业性。让我们深入探索PDF校对的重要性以及它为…

element-ui中的el-table的summary-method(合计)的使用

场景图片&#xff1a; 图片1&#xff1a; 图片2&#xff1a; 一&#xff1a;使用element中的方法 优点&#xff1a; 直接使用summary-method方法&#xff0c;直接&#xff0c;方便 缺点&#xff1a; 只是在表格下面添加了一行&#xff0c;如果想有多行就不行了 1&#xff1a;h…

一、MQ的基本概念

1、初识MQ MQ全称是Message Queue&#xff0c;消息队列&#xff0c;多用于系统之间进行异步通信。队列的概念数据结构中有详细介绍过&#xff0c;先进先出&#xff0c;消息队列就是存储消息的数据结构。 同步调用和异步调用两者之间的区别&#xff1a; 同步调用&#xff1a;发…

opencv-dnn

# utils_words.txt 标签文件 import osimage_types (".jpg", ".jpeg", ".png", ".bmp", ".tif", ".tiff")def list_images(basePath, containsNone):# return the set of files that are validreturn list_file…

gdb 条件断点

条件断点&#xff0c;顾名思义就是有条件才会触发的断点&#xff0c;一般设置此类断点形如&#xff1a;b xxx if xxx&#xff0c;如&#xff1a; 要触发此断点则需要 is_created 0。打完断点我们也可以用 info b 查看一下当前已经设置的断点信息&#xff0c;如&#xff1a; 断…

探索未知世界:桌面端3D GIS引领地理信息新时代

近年来&#xff0c;桌面端的三维地理信息系统&#xff08;3D GIS&#xff09;在地理信息领域迎来了显著的发展&#xff0c;为我们带来了更深入、更丰富的地理空间认知和数据分析体验。从城市规划到环境保护&#xff0c;从资源管理到应急响应&#xff0c;桌面端的3D GIS正逐渐成…

Java程序设计——在一个给定的字符串中查找并解析姓名、出生日期、个人网站、身高和体重信息,并输出相应的结果

package ch4;public class FindMess {public static void main(String[] args) {String mess "姓名:张三 出生时间:1989.10.16。个人网站:http://www.zhang.com。身高:185 cm,体重:72 kg";int index (int)(mess.indexOf(":")); //mess调用indexOf(Stri…

git Update failed cannot lock ref

报错详情 解决方案 百度了很多方案&#xff0c;过滤出了有效方案 去该项目下的.git文件里找到报错文件&#xff0c;本例中即为&#xff1a;.git/refs/tags/pre-RELEASE-PRE-20230817-03 删除该文件&#xff0c;重新pull&#xff0c;pull成功问题解决

Java并发工具类

JDK并发包中常用并发工具类&#xff1a; CountDownLatch、CyclicBarrier和Semaphore工具类提供了一种并发流程控制的手段&#xff1b; Exchanger工具类则提供了在线程间交换数据的一种手段。 等待多线程完成的CountDownLatch CountDownLatch允许一个或多个线程等待其他线程完成…

Electron学习3 使用serialport操作串口

Electron学习3 使用serialport操作串口 一、准备工作二、 SerialPort 介绍1. 核心软件包(1) serialport(2) serialport/stream(3) serialport/bindings-cpp(4) serialport/binding-mock(5) serialport/bindings-interface 2. 解析器包3. 命令行工具 三、创建一个demo程序1. 创建…

Dapper

介绍 dapper是一款轻量级的ORM Dapper 被称为 ORM 之王。 以下是 Dapper 的主要功能&#xff1a; 速度快&#xff0c;性能快。 更少的代码行。 对象映射器。 静态对象绑定。 动态对象绑定。 轻松处理 SQL 查询。 易于处理存储过程。 直接对 IDBConnection 类进行操作&#xf…

重注微电子产业,“三大齿轮”能否带起香港经济的“第三轮”

文 | 智能相对论 作者 | 佘凯文 众所周知&#xff0c;微电子产业早已成为现代科技领域的关键钥匙&#xff0c;谁能掌握微电子产业&#xff0c;谁就能拥有全球科技领域的话语权。 从上世纪开始&#xff0c;微电子产业曾经历过几次重大转移&#xff0c;如70年代从美国转向日本…

零拷贝技术详解

当涉及到网络编程和IO操作时&#xff0c;数据拷贝是一个常见的性能瓶颈。传统的数据拷贝过程中&#xff0c;数据需要从内核缓冲区复制到用户空间缓冲区&#xff0c;然后再从用户空间缓冲区复制到内核缓冲区&#xff0c;这个过程会耗费大量的CPU时间和内存带宽&#xff0c;降低系…

tensorRT安装

官方指导文档&#xff1a;Installation Guide :: NVIDIA Deep Learning TensorRT Documentation 适配很重要&#xff01;&#xff01;&#xff01;&#xff01; 需要cuda, cuDNN, tensorRT三者匹配。我的cuda11.3 所以对应的cuDNN和tensorRT下载的是如下版本&#xff1a; cud…

【业务功能篇77】微服务-OSS对象存储-上传下载图片

3. 图片管理 文件存储的几种方式 单体架构可以直接把图片存储在服务器中 但是在分布式环境下面直接存储在WEB服务器中的方式就不可取了&#xff0c;这时我们需要搭建独立的文件存储服务器。 3.1 开通阿里云服务 针对本系统中的相关的文件&#xff0c;图片&#xff0c;文本等…

07-Numpy基础-伪随机数生成

numpy.random模块对Python内置的random进行了补充&#xff0c;增加了一些用于高效生成多种概率分布的样本值的函数。 例如&#xff0c;你可以用normal来得到一个标准正态分布的44样本数组&#xff1a; 而Python内置的random模块则只能一次生成一个样本值。从下面的测试结果中可…

Mybatis查询一条数据

上一篇我们介绍了在pom文件中引入mybatis依赖&#xff0c;配置了mybatis配置文件&#xff0c;通过读取配置文件创建了会话工厂&#xff0c;使用会话工厂创建会话获取连接对象读取到了数据库的基本信息。 如果您需要对上面的内容进行了解&#xff0c;可以参考Mybatis引入与使用…