echarts 水平柱图 科技风
var category= [{
name: "管控",
value: 2500
},
{
name: "集中式",
value: 8000
},
{
name: "纳管",
value: 3000
},
{
name: "纳管",
value: 3000
},
{
name: "纳管",
value: 3000
}
]; // 类别
var total = 10000; // 数据总数
var datas = [];
category.forEach(value => {
datas.push(value.value);
});
option = {
backgroundColor:'#071347',
xAxis: {
max: total,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
},
axisTick: {
show: false
}
},
grid: {
left: 80,
top: 20, // 设置条形图的边距
right: 180,
bottom: 80
},
yAxis: [{
type: "category",
inverse: false,
data: category,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
}],
series: [{
// 内
type: "bar",
barWidth: 18,
legendHoverLink: false,
silent: true,
itemStyle: {
normal: {
color: function(params) {
var color;
if(params.dataIndex==19){
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#EB5118" // 0% 处的颜色
},
{
offset: 1,
color: "#F21F02" // 100% 处的颜色
}
]
}
}else if(params.dataIndex==18){
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#FFA048" // 0% 处的颜色
},
{
offset: 1,
color: "#B25E14" // 100% 处的颜色
}
]
}
}else if(params.dataIndex==17){
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#F8E972" // 0% 处的颜色
},
{
offset: 1,
color: "#E5C206" // 100% 处的颜色
}
]
}
}else{
color = {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0,
color: "#1588D1" // 0% 处的颜色
},
{
offset: 1,
color: "#0F4071" // 100% 处的颜色
}
]
}
}
return color;
},
}
},
label: {
normal: {
show: true,
position: "left",
formatter: "{b}",
textStyle: {
color: "#fff",
fontSize: 14
}
}
},
data: category,
z: 1,
animationEasing: "elasticOut"
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal:{
color:"#061348"
}
},
symbolRepeat: "fixed",
symbolMargin: 6,
symbol: "rect",
symbolClip: true,
symbolSize: [1, 21],
symbolPosition: "start",
symbolOffset: [1, -1],
symbolBoundingData: this.total,
data: category,
z: 2,
animationEasing: "elasticOut"
},
{
// 外边框
type: "pictorialBar",
symbol: "rect",
symbolBoundingData: total,
itemStyle: {
normal: {
color: "none"
}
},
label: {
normal: {
formatter: (params) => {
var text;
if(params.dataIndex==1){
text = '{a| 100%}{f| '+params.data+'}';
}else if(params.dataIndex==2){
text = '{b| 100%}{f| '+params.data+'}';
}else if(params.dataIndex==3){
text = '{c| 100%}{f| '+params.data+'}';
}else{
text = '{d| 100%}{f| '+params.data+'}';
}
return text;
},
rich:{
a: {
color: 'red'
},
b: {
color: 'blue'
},
c:{
color: 'yellow'
},
d:{
color:"green"
},
f:{
color:"#ffffff"
}
},
position: 'right',
distance: 0, // 向右偏移位置
show: true
}
},
data: datas,
z: 0,
animationEasing: "elasticOut"
},
{
name: "外框",
type: "bar",
barGap: "-120%", // 设置外框粗细
data: [total, total, total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total,total],
barWidth: 25,
itemStyle: {
normal: {
color: "transparent", // 填充色
barBorderColor: "#1C4B8E", // 边框色
barBorderWidth: 1, // 边框宽度
// barBorderRadius: 0, //圆角半径
label: {
// 标签显示位置
show: false,
position: "top" // insideTop 或者横向的 insideLeft
}
}
},
z: 0
}
]
};
相关文章：
echarts 水平柱图 科技风
var category [{ name: "管控", value: 2500 }, { name: "集中式", value: 8000 }, { name: "纳管", value: 3000 }, { name: "纳管", value: 3000 }, { name: "纳管", value: 3000 } ]; // 类别 var total 10000; // 数据…...
标准IO与系统IO
概念区别 标准IO：（libc提供） fopen fread fwrite 系统IO：（linux系统提供） open read write 操作效率 因为内存与磁盘的执行效率不同 系统IO： 把数据从内存直接写到磁盘上 标准IOÿ…...
【conda】Conda 环境迁移指南：如何更改 envs_dirs 和 pkgs_dirs 以及跨盘迁移
目录 迁移概述一、conda 配置文件1.1 安装 Conda 后的默认目录设置1.2 查看当前 .condarc 配置 二、更改 Conda 的 envs_dirs 和 pkgs_dirs 设置2.1 使用 conda config 命令Windows 和 Linux 系统 2.2 手动编辑 .condarc 文件Windows 系统Linux 系统 2.3 验证设置 三、迁移 Con…...
脏页写入磁盘的过程详解
脏页写入磁盘的过程 一、引言 在数据库系统中，脏页是指那些被修改过但还未写入磁盘的数据页。为了保证数据的一致性和持久性，数据库系统需要在适当的时候将脏页写入磁盘。了解脏页写入磁盘的过程对于理解数据库的内部工作机制和优化性能至关重要。 二、触发脏页写入的条件…...
数据结构——单链表实现和注释浅解
关于单链表的基础部分增删查改的实现和一点理解，写在注释里~ SList.h #pragma once #include<stdio.h> #include<stdlib.h> #include<assert.h>//定义节点的结构 //数据 指向下一个节点的指针 typedef int SLTDataType;typedef struct SListNo…...
滑动窗口系列(同向双指针)/9.7
新的解题思路 一、三数之和的多种可能 给定一个整数数组 arr ，以及一个整数 target 作为目标值，返回满足 i < j < k 且 arr[i] arr[j] arr[k] target 的元组 i, j, k 的数量。 由于结果会非常大，请返回 109 7 的模。 输入&…...
C# 窗体中Control以及Invalidate，Update，Refresh三种重绘方法的区别
在 C# 中，Control 类是 Windows Forms 应用程序中所有控件的基类。它提供了控件的基本功能和属性，这些功能和属性被所有继承自 Control 类的子类所共享。这意味着 Control 类是构建 Windows Forms 应用程序中用户界面元素的基础。 以下是 Control 类的一…...
缓存类型以及读写策略
缓存（Cache）是一种高效的数据存储技术，旨在提高数据访问速度。 它将频繁访问或最近使用的数据临时存储在更快速但较小的存储介质（如内存）中，以减少从较慢的存储设备（如硬盘或远程服务器&#x…...
自动驾驶---Motion Planning之轨迹拼接
1 背景 笔者在之前的专栏中已经详细讲解了自动驾驶Planning模块的内容：包括行车的Behavior Planning和Motion Planning，以及低速记忆泊车的Planning。 本篇博客主要聊一聊Motion Planning中轨迹拼接的相关内容。从网络上各大品牌的车主拍摄的智驾视频来看…...
没资料的屏幕怎么点亮？思路分享
这次尝试调通一个没资料的屏幕，型号是HYT13264，这个是淘宝上面的老王2.9元屏，成色很好但是长期库存没有资料和代码能点亮，仅仅只有一个引脚定义。这里我使用Arduino Nano作为控制器尝试点亮这个模块。 首先，已知别人找…...
通信工程学习：什么是FEC前向纠错
FEC：前向纠错 FEC（Forward Error Correction，前向纠错）是一种增加数据通信可信度的技术，广泛应用于计算机网络、无线通信、卫星通信等多种数据传输场景中。其基本原理和特点可以归纳如下： 一、FEC前向纠错…...
【机器人工具箱Robotics Toolbox开发笔记（二十）】机器人工具箱SerialLink I类函数参数说明
机器人工具箱中的SerialLink表示串联机器人型机器人的具体类。该类使用D-H参数描述，每个关节一组。SerialLink I类包含的参数如表1所示。 表1 SerialLink I类参数 参 数 意 义 参 数 意 义 plot 显示机器人的图形表示 jacobn 工具坐标系中的雅可比矩阵 plot3D 显示机…...
单调栈的实现
这是C算法基础-数据结构专栏的第二十四篇文章，专栏详情请见此处。 引入 单调栈就是满足单调性的栈结构，它最经典的应用就是给定一个序列，找出每个数左边离它最近的比它大/小的数。 下面我们就来讲单调栈的实现。 定义 单调栈就是满足单调性…...
ffmpeg的安装和使用教程
在Linux上安装和使用FFmpeg可以方便地完成音视频的编码、解码、转码等操作。以下是详细的安装和使用教程。 安装FFmpeg FFmpeg的安装方法会因为不同的Linux发行版有所不同。下面是几种常见的安装方法： Ubuntu/Debian 打开终端，更新包列表并安装FFmpe…...
从计组中从重温C中浮点数表示及C程序翻译过程
目录 移码编辑 传统浮点表示格式 浮点数的存储（ieee 754）->修炼内功 例子： 编辑 浮点数取的过程 C程序翻译过程 移码 传统浮点表示格式 浮点数的存储（ieee 754）->修炼内功 根据国际标准IEEE࿰…...
详细版)
MySQL常用函数(总结)详细版
1. 字符串函数 CONCAT(str1, str2, ...)：将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); LENGTH(str)：返回字符串的长度（字节数）。 SELECT LENGTH(Hello); SUBSTRING(str, pos, len)：从字符串 …...
学习记录——day41 C++ 类的静态成员 static
静态成员，是类中不依赖于类对象而独立存在的成员变量，但仍然属于类，是成员的一种 静态成员的空间分配发生在出现编译阶段，不占用类的空间 静态成员分为，静态成员变量和静态成员函数 静态成员变量 1、相关概念 1&…...
JVM - Java内存区域
文章目录 目录 文章目录 运行时数据区域 程序计数器 栈 Java虚拟机栈 本地方法栈 栈帧的组成 局部变量表 操作数栈 帧数据 堆 方法区 直接内存 总结 运行时数据区域 Java虚拟机在执行Java程序的过程中会把它所管理的内存区域划分为若干个不同的数据区域。这些区…...
本地电脑交叉编译ffmpeg 到 windows on arm64
本地电脑交叉编译ffmpeg 到 windows on arm64 我这里有编译好的win on arm 的 ffmpeg : https://github.com/wmx-github/ffmpeg-wos-arm64-build 使用 llvm-mingw 工具链 https://github.com/mstorsjo/llvm-mingw/releases 前缀 aarch64-w64-mingw32- 这个库是ubuntu 交叉编译…...
使用 @NotEmpty、@NotBlank、@NotNull 注解进行参数校验
使用 NotEmpty、NotBlank、NotNull 注解进行参数校验 一、前言二、依赖三、使用 NotEmpty、NotBlank、NotNull 注解进行参数校验1. NotNull2. NotEmpty3. NotBlank4. 区别与适用场景 四、实践中的应用五、总结 一、前言 在 Java 开发中，参数校验是确保数据一致性和…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
【JavaEE】-- HTTP
1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程，系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
破解路内监管盲区：免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题，导致车牌识别率低、逃费率高，传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法，正成为破局关键。该设备安装于车位侧方0.5-0.7米高度，直接规避树枝遮…...
Kubernetes 网络模型深度解析：Pod IP 与 Service 的负载均衡机制，Service到底是什么？
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址：Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址（如 10.244.1.2）无特殊名称：在 Kubernetes 中，它通常被称为 “Pod IP” 或 “容器 IP”生命周期：与 Pod …...
从实验室到产业：IndexTTS 在六大核心场景的落地实践
一、内容创作：重构数字内容生产范式 在短视频创作领域，IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色，生成的 “各位吴彦祖们大家好” 语音相似度达 97%，单条视频播放量突破百万…...
RKNN开发环境搭建2-RKNN Model Zoo 环境搭建
目录 1.简介2.环境搭建2.1 启动 docker 环境2.2 安装依赖工具2.3 下载 RKNN Model Zoo2.4 RKNN模型转化2.5编译C++1.简介 RKNN Model Zoo基于 RKNPU SDK 工具链开发, 提供了目前主流算法的部署例程. 例程包含导出RKNN模型, 使用 Python API, CAPI 推理 RKNN 模型的流程. 本…...