echarts横向柱状图胶囊

news2025/3/3 5:25:31

在这里插入图片描述
在这里插入图片描述

echarts配置项

tooltip: {
	trigger: 'axis',  // 触发tooltip提示类型 axis:坐标轴触发
	axisPointer: {
		type: 'cross',  // 指示器类型 cross: 十字准星指示器
		crossStyle: {
			color: '#999' // 线颜色
		}
	}
},
grid: {  
	left: '0%',  //离容器左侧的距离
	top:'5%',
	bottom: '3%',
    containLabel: true   // 是否将标签文字包含在图形之内‌,为false时,左侧label会不显示
},
xAxis: {
	type: 'value',
	boundaryGap: [0, 0.01],
	splitLine:{
		show:false,  // 设置 X 轴网格线不展示
	},
	axisLine:{
		show:false, // 设置 X 轴线不显示
	},
	axisTick: {
		show: false // 设置 X 轴刻度不显示
	},
	axisLabel:{
		show:false, // 设置 X 轴数值不显示
	},
},
 yAxis: {
	type: 'category',
	splitLine:{
		show:false,  // 设置 X 轴网格线不展示
	},
	axisLine:{
		show:false, // 设置 X 轴线不显示
	},
	axisTick: {
		show: false // 设置 X 轴刻度不显示
	},
	data:['周一','周二','周三','周四']
},
series: [
	{
		name:'命中次数',
		data:[6,2,2,1],
		type:'bar',
		itemStyle:{
			// 渐变 从左到右
			color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
				{ offset: 0, color: '#50a0ff' },
                { offset: 1, color: '#51e3d9' }
          	),
			borderRadius:[10,10,10,10],  // 圆角,左上、右上、右下、左下
		},
		barWidth:10,  // 柱状图宽度
		tooltip: {
			valueFormatter: function (value:any) {
				return (value as number)+'次';
			}
		},
		label: {
  			show: true, // 显示文案
			position: 'right', // 在顶部显示
			// 可以通过 formatter 自定义显示格式
			formatter: '{c}', // {c} 表示数据值
		}
	}
]

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

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

相关文章

人工智能的发展领域之GPU加速计算的应用概述、架构介绍与教学过程

文章目录 一、架构介绍GPU算力平台概述优势与特点 二、注册与登录账号注册流程GPU服务器类型配置选择指南内存和存储容量网络带宽CPU配置 三、创建实例实例创建步骤镜像选择与设置 四、连接实例SSH连接方法远程桌面配置 一、架构介绍 GPU算力平台概述 一个专注于GPU加速计算的…

Redis Exporter 安装与配置指南(v1.67.0)

🚀 1. 下载 Redis Exporter 首先,登录到目标服务器,下载 Redis Exporter v1.67.0 安装包。 wget https://github.com/oliver006/redis_exporter/releases/download/v1.67.0/redis_exporter-v1.67.0.linux-amd64.tar.gz📦 2. 解压…

WD5105同步降压转换器:9.2V-95V宽电压输入,4.5A大电流输出,95%高效率,多重保护功能

概述 • WD5105同步降压转换器 • 封装形式:QFN-20封装 • 应用场景:适用于车载充电器、电动车仪表、电信基站电源、电源适配器等 性能特点 • 输入电压范围:9.2V至95V • 输出电流:可提供4.5A连续负载电流 • 效率:高…

Laravel 新 WebSocket 服务 Reverb 使用指南

旧篇 > Laravel/Lumen 中使用 Echo Socket.IO-Client 实现网页即时通讯广播 https://blog.csdn.net/maxsky/article/details/130394420 已过时 与时俱进,Laravel 官方在 2024 年 7 月发布了 laravel/reverb 包的正式版,因为之前使用的 laravel-echo-…

什么是Kafka?有什么主要用途?

大家好,我是锋哥。今天分享关于【什么是Kafka?有什么主要用途?】面试题。希望对大家有帮助; 什么是Kafka?有什么主要用途? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Kafka 是一个分布式流…

Python爬虫基础——认识网页结构(各种标签的使用)

1、添加<div>标签的代码定义了两个区块的宽度和高度均为100px&#xff0c;边框的格式也相同&#xff0c;只是区块中显示的内容不同&#xff1b; 2、添加<ul>和<ol>标签分别用于定义无序列表和有序列表。<il>标签位于<ul>标签或<ol>标签之…

数据结构:LinkedList与链表—面试题(三)

目录 1、移除链表元素 2、反转链表 3、链表的中间结点 4、返回倒数第k个结点 5、合并两个有序链表 1、移除链表元素 习题链接https://leetcode.cn/problems/remove-linked-list-elements/description/ 描述&#xff1a;给你一个链表的头节点 head 和一个整数 val &#xff…

QT实现 端口扫描暂停和继续功能 3

上篇QT给端口扫描工程增加线程2-CSDN博客 为按钮pushButton_Stop添加clicked事件&#xff0c;功能为暂停扫描&#xff0c;并在暂停后显示继续按钮&#xff0c;点击继续按钮之后继续扫描 1.更新UI 添加继续按钮 点击转到槽则会自动声明 2. 更新 MainWindow.h 需要新增的部分…

LabVIEW瞬变电磁接收系统

利用LabVIEW软件与USB4432采集卡开发瞬变电磁接收系统。系统通过改进硬件配置与软件编程&#xff0c;解决了传统仪器在信噪比低和抗干扰能力差的问题&#xff0c;实现了高精度的数据采集和处理&#xff0c;特别适用于地质勘探等领域。 ​ 项目背景&#xff1a; 瞬变电磁法是探…

左神算法基础巩固--3

文章目录 二叉树二叉树的遍历先序遍历中序遍历后序遍历 解答二叉树的宽度优先遍历 在这里插入图片描述 一颗完全二叉树具有以下特征&#xff1a;1.不存在任何一个节点具有右子树但不存在左子树.2.不存在任何一个节点在满足1的情况下左右子树不全且其后续节点不为叶子节点 根据以…

高山旅游景区有效降低成本,无人机山下到山上物资吊运技术详解

在高山旅游景区&#xff0c;传统的物资运输方式往往面临人力成本高昂、效率低下等问题&#xff0c;而无人机技术的引入为这一难题提供了新的解决方案。以下是对无人机从山下到山上进行物资吊运技术的详细解析&#xff1a; 一、无人机物资吊运技术的优势 1. 降低人力成本&#…

APP上架之Android 证书 MD5 指纹

Android 证书 MD5 指纹 1. 什么是 Android 证书 MD5 指纹&#xff1f; Android 证书 MD5 指纹是对证书数据进行 MD5 哈希运算后得到的 128 位字符串。在 Android 开发中&#xff0c;每个证书在理论上都有一个唯一的 MD5 指纹&#xff0c;用于识别和验证证书的有效性。证书指纹…

用户界面的UML建模11

然而&#xff0c;在用户界面方面&#xff0c;重要的是要了解《boundary》类是如何与这个异常分层结构进行关联的。 《exception》类的对象可以作为《control》类的对象。因此&#xff0c;《exception》类能够聚合《boundary》类。 参见图12&#xff0c;《exception》Database…

网络安全-XSS跨站脚本攻击(基础篇)

漏洞扫描的原理 1.跨站脚本攻击介绍 xss跨站脚本攻击&#xff1a; xSS 全称&#xff08;Cross site Scripting &#xff09;跨站脚本攻击&#xff0c;是最常见的Web应用程序安全漏洞之一&#xff0c;位于OWASP top 10 2013/2017年度分别为第三名和第七名&#xff0c;XSS是指攻…

CODESYS MODBUS TCP通信(禾川Q1 PLC作为MODBUS TCP从站)

禾川Q1 PLC MODBUS TCP 通信(PLC作为MODBUS TCP通信主站) 禾川Q1 PLC MODBUS TCP通信(CODESYS平台完整配置+代码)-CSDN博客文章浏览阅读28次。MATLAB和S7-1200PLC水箱液位高度PID控制联合仿真(MODBUSTCP通信)_将matlab仿真导入plc-CSDN博客文章浏览阅读722次。本文详细介绍了如…

golang OpcUaClient

实现功能 package mainimport ("fmt""log""opcuaclient/util/plugin/client/opcclient""os""os/signal""syscall" )func main() {OPCUATest()// 监听操作系统信号&#xff0c;阻塞直到接收到信号quit : make(chan…

git commit冲突,需输入提交信息合并提交

git commit时冲突&#xff0c;需输入提交信息合并提交&#xff0c;该如何操作&#xff1f; windows按esc键进入命令模式&#xff0c;输入&#xff1a;wq并按enter保存并退出即可。

Linux/Ubuntu/银河麒麟 arm64 飞腾FT2000 下使用 arm64版本 linuxdeployqt 打包Qt程序

文章目录 一、前言二、环境三、准备1、下载Linuxdeployqt源码2、下载Appimagetool-aarch64.AppImage四、编译linuxdeployqt1.配置环境变量2.编译linuxdeployqt五、安装patchelf六、配置Appimagetool七、打包Qt程序重要提示:测试启动应用八、其他九、最后一、前言 因为项目需要…

操作系统大题整理

专题一 程序代码题&#xff1a;程序设计与分析&#xff0c;主要考的是线程&#xff0c;多线程的并发&#xff1f; 大题第一问&#xff08;1&#xff09;操作系统的结构有哪几种常用的结构&#xff1f; 宏内核&#xff1a;宏内核是将操作系统的主要功能模块都集中在内核的一种结…

SQL编程语言

第一章 1. 数据库是长期储存在计算机内&#xff0c;由专门的数据管理软件(数据库管理系统)&#xff0c;进行统一组织和管理控制的大量数据的集合。 2.数据库的基本特点不包括可以快速检索。 3. 数据管理技术的发展经历了&#xff1a;人工管理阶段、文件系统阶段、数据库系统阶…