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

echarts自定义图表

news 来源：原创 2025/6/10 3:13:58

普通柱状图
在这里插入图片描述
自定义柱状图

实现思路
4个图层

背景边框实体内部透明
地步透明间隙
红色柱形+数据数据使用自定义字体+倾斜
柱形上方扁平矩形矩形颜色透明 label字体颜色和背景色相同实现矩形块上下靠padding实现向下 paddingBottom使用负数

完整代码

<!DOCTYPE html>
<html style="height: 100%; background: #000"><head><meta charset="utf-8" /><title>发光柱状图</title><script src="https://cdn.jsdelivr.net/npm/echarts@5"></script><style>/* 在 CSS 文件中定义自定义字体 */@font-face {font-family: "MyCustomFont"; /* 自定义字体名称 */src: url("public/只含数字.ttf");font-weight: normal;font-style: normal;}</style></head><body style="background: #fff; height: 100vh; overflow: hidden; padding: 200px"><divid="main"style="height: 200px; width: 300px"></div><script>const chart = echarts.init(document.getElementById("main"));const data = [39, 47, 40, 84, 35, 90, 71];const categories = ["A", "B", "C", "D", "E", "F", "G"];const redBarOffset = 5;// 最大值为100时 如下 增加 下方空隙 + 上方labelconst maxBarValue = 100 + redBarOffset + 10;const fontSize = 12;const option = {backgroundColor: "#000",xAxis: {type: "category",data: categories,axisLine: { lineStyle: { color: "transparent" } },axisLabel: {color: "#666",fontSize: fontSize,},},yAxis: {show: false,max: maxBarValue + redBarOffset + 10,},grid: {left: "5%",right: "5%",bottom: "12%",top: "5%",},series: [// 金色背景柱{type: "bar",data: Array(data.length).fill(maxBarValue),barWidth: "80%",itemStyle: {color: "#211316fa",borderColor: "#302727",borderWidth: 3,},z: 1,},// 占位透明柱（用于悬空红柱）{type: "bar",data: Array(data.length).fill(redBarOffset),stack: "data",barWidth: "40%",itemStyle: {color: "transparent",},z: 2,},// 红色柱子（真实数据）{type: "bar",animationDuration: 1500,animationEasing: "elasticOut",data: data.map(v => v),stack: "data",barGap: "-75%",itemStyle: {color: "#7A192A",// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [//     { offset: 0, color: "#9D1727" },//     { offset: 1, color: "#8A2F34" },// ]),shadowColor: "#9D1727",shadowBlur: 10,},label: {show: true,position: "top",color: "#eebb43",fontWeight: "bold",fontSize: fontSize,formatter: "{c}",fontFamily: "MyCustomFont",fontStyle: "italic",textShadowColor: "#eebb43",textShadowBlur: 3,distance: fontSize,},z: 3,},// 顶部矩形块 用label替代{type: "bar",stack: "data",data: data.map(v => 0),color: "transparent",label: {show: true, // 显示标签position: "top", // 标签位置（如 top/inside/outside）color: "#9f2C2D", // 文字颜色（白色更醒目）backgroundColor: "#9f2C2D", // 背景颜色borderRadius: fontSize / 7, // 边框圆角设为 0 实现矩形// padding: [fontSize / 6, fontSize / 1.5], // 内边距调整矩形大小padding: [0, fontSize / 1.5, -fontSize / 6, fontSize / 1.5], // 内边距调整矩形大小formatter: "", // 显示数据值（{c} 代表数据值）shadowColor: "#9f2C2D",shadowBlur: fontSize / 2,align: "center",},z: 4,},],};chart.setOption(option);</script></body>
</html>

echarts自定义图表

普通柱状图自定义柱状图实现思路 4个图层背景边框实体内部透明地步透明间隙红色柱形数据数据使用自定义字体倾斜柱形上方扁平矩形矩形颜色透明 label字体颜色和背景色相同实现矩形块上下靠padding实现向下 paddingBottom使用负数完整代码 <!DOCTYPE html> <…...

编程日记 2025/5/23 15:23:33

【应用密码学】实验二分组密码（2）

一、实验要求与目的 1） 学习AES密码算法原理 2） 学习AES密码算法编程实现二、实验内容与步骤记录（只记录关键步骤与结果，可截图，但注意排版与图片大小） 字符串加解密运行python程序，输入…...

编程日记 2025/5/27 4:39:02

【深度学习】多头注意力机制的实现|pytorch

博主简介：努力学习的22级计算机科学与技术本科生一枚🌸博主主页： Yaoyao2024往期回顾：【深度学习】注意力机制| 基于“上下文”进行编码,用更聪明的矩阵乘法替代笨重的全连接每日一言🌼: 路漫漫其修远兮，吾…...

编程日记 2025/6/1 11:36:04

OceanBase数据库磁盘空间管理

OceanBase数据库磁盘空间管理日志盘空间管理日志盘容量参数日志盘空间满应急处理数据盘空间管理数据盘容量参数数据文件自动扩展数据盘空间满应急处理表占用的磁盘空间日志盘空间管理日志盘容量参数 🐯 与日志盘redo_dir相关的四个重要参数： log_…...

编程日记 2025/5/29 12:08:46

自然语言处理之机器翻译：Statistical Machine Translation（SMT）的评估方法解析与创新实践

## 机器翻译与评估的重要性机器翻译（Machine Translation, MT）作为自然语言处理（NLP）的核心任务之一，旨在通过计算机实现跨语言的信息传递。随着全球化进程加速，机器翻译在商业、科研、社交等领域的应用愈发广泛。然而，翻译质量直接决定了其实际价值，因此**翻译质量…...

编程日记 2025/5/29 8:51:18

1.AER #install.packages("AER") library(AER)# 引用R包 citation("AER") # 参考文献：Kleiber, Christian, and Achim Zeileis. Applied econometrics with R. Springer Science & Business Media, 2008.# 查看有哪些数据集 data(package …...

编程日记 2025/5/27 6:33:10

【Linux系统】详解Linux权限

文章目录前言一、学习Linux权限的铺垫知识1.Linux的文件分类2.Linux的用户2.1 Linux下用户分类2.2 创建普通用户2.3 切换用户2.4 sudo（提升权限的指令） 二、Linux权限的概念以及修改方法1.权限的概念2.文件访问权限和访问者身份的相关修改&#xff08…...

编程日记 2025/5/29 8:59:03

Go语言--语法基础4--基本数据类型--字符串类型

在 Go 语言中，字符串也是一种基本类型。相比之下， C/C 语言中并不存在原生的字符串类型， 通常使用字符数组来表示，并以字符指针来传递。 Go 语言中字符串的声明和初始化非常简单，举例如下： var str st…...

编程日记 2025/5/28 7:43:10

分布式GPU上计算长向量模的方法

分布式GPU上计算长向量模的方法当向量分布在多个GPU卡上时，计算向量模(2-范数)需要以下步骤： 在每个GPU上计算本地数据的平方和跨GPU通信汇总所有平方和在根GPU上计算总和的平方根实现方法下面是一个完整的CUDA示例代码，使用NCCL进行多…...

编程日记 2025/5/27 8:09:38

项目班——0422——日志

...

编程日记 2025/5/26 13:37:07

【音视频】音频编码实战

FFmpeg流程从本地⽂件读取PCM数据进⾏AAC格式编码，然后将编码后的AAC数据存储到本地⽂件。示例的流程如下所示。关键函数说明： avcodec_find_encoder：根据指定的AVCodecID查找注册的编码器。avcodec_alloc_context3：为AVCod…...

编程日记 2025/6/4 16:08:14

Git Bash 下使用 SSH 连接出现 “Software caused connection abort” 问题

目录一、检查网络环境和防火墙设置（失败）二、尝试使用 GitHub 的备用 SSH 端口 443（成功）三、检查 SSH Key 是否被正确加载四、检查是否多个 SSH 进程干扰或者服务异常五、使用 HTTPS 方式临时解决（非 SSH&#xff09…...

编程日记 2025/5/29 20:39:28

K8S Pod 常见数据存储方案

假设有如下三个节点的 K8S 集群： k8s31master 是控制节点 k8s31node1、k8s31node2 是工作节点容器运行时是 containerd 一、理论介绍 1.1、Volumes 卷 Kubernetes 的卷是 pod 的⼀个组成部分，因此像容器⼀样在 pod 的规范（pod.spec&#x…...

编程日记 2025/5/31 8:15:27

JavaScript 模板字符串：更优雅的字符串处理方式

什么是模板字符串？ 模板字符串（Template Literals）是 ES6（ES2015）引入的一种新的字符串表示方式，它提供了更强大、更灵活的字符串拼接功能。与传统的字符串使用单引号（）或双引号&am…...

编程日记 2025/5/29 10:16:08

DeepSeek智能时空数据分析（五）：基于区域人口数量绘制地图散点-大模型搜集数据NL2SQL加工数据

序言：时空数据分析很有用，但是GIS/时空数据库技术门槛太高时空数据分析在优化业务运营中至关重要，然而，三大挑战仍制约其发展：技术门槛高，需融合GIS理论、SQL开发与时空数据库等多领域知识；空…...

编程日记 2025/5/22 2:15:40

PostSwigger 的 CSRF 漏洞总结

本文所提供的关于 web 安全的相关信息、技术讲解及案例分析等内容，仅用于知识分享与学术交流目的，旨在提升读者对 web 安全领域的认知与理解。以下仅仅是作者对 PostSwigger Web 安全的知识整理和分享，严禁任何非法犯罪活动。限制 CSRF 的三…...

编程日记 2025/5/29 8:46:23

vue项目页面适配

vue项目页面适配目的：结合动态设置根字体大小的脚本（如通过 JavaScript 监听屏幕尺寸变化），实现页面元素在不同设备上的自适应缩放 1、安装postcss-pxtorem ### 若项目未集成 postcss，需同步安装： npm …...

编程日记 2025/6/1 13:08:25

AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok的客户端开源应用程序，集成了 Monaco 编辑器。

一、软件介绍文末提供程序和源码下载学习 AI-Browser适用于 ChatGPT、Gemini、Claude、DeepSeek、Grok、Felo、Cody、JENOVA、Phind、Perplexity、Genspark 和 Google AI Studio 的客户端应用程序，集成了 Monaco 编辑器。使用 Electron 构建的强大桌面应用程序&a…...

编程日记 2025/5/27 6:13:09

Flutter Dart新特性NulI safety late 关键字、空类型声明符?、非空断言!、required 关键字

目录 late 关键字 required关键词: 常用的Model对象使用required Null safety翻译成中文的意思是空安全 null safety 可以帮助开发者避免一些日常开发中很难被发现的错误，并且额外的好处是可以改善性能后的版本都要求使用nul1 safety。Flutter2.2.0(2021年5月19日…...

编程日记 2025/5/25 8:40:25

CF2096G Wonderful Guessing Game 构造

题解首先考虑没有 ? ? ? 回答的时候，答案是多少。猜猜需要多少个询问。 ⌈ log ⁡ 2 n ⌉ ? ⌈ log ⁡ 3 n ⌉ ? \lceil \log_2n\rceil ? \lceil \log_3n\rceil ? ⌈log2n⌉?⌈log3n⌉? 可以构造一个表，行表示不同的询问，…...

编程日记 2025/5/29 9:19:23

制作一款打飞机游戏26：精灵编辑器

虽然我们基本上已经重建了Axel编辑器，但我不想直接使用它。我想创建一个真正适合我们当前目的的编辑器，那就是编辑精灵（sprites）。这将是今天的一个大目标——创建一个基于模板的编辑器，用它作为我们实际编辑器的起点。…...

编程日记 2025/5/28 10:37:02

深入Java JVM常见问题及解决方案

1. 简介 Java虚拟机（JVM）是Java程序运行的核心环境，但其复杂性可能导致内存泄漏、性能下降、类加载失败等问题。本文从内存管理、垃圾回收、性能调优、异常处理四大方向，结合工具使用与实战案例，详解JVM问题的排查与解…...

编程日记 2025/5/24 16:26:53

【MySQL】Java代码操作MySQL数据库 —— JDBC编程

目录 1. Java的JDBC编程 1.1 Java的数据库编程：JDBC 1.2 JDBC工作原理 1.3 如何在项目中导入数据库驱动包如何下载数据库驱动包 jar包如何引入项目中 2. 编写JDBC代码 1. 创建并初始化一个数据源(DataSource) 2. 和数据库服务器建立连接 3. 构造 SQL 语句…...

编程日记 2025/5/29 9:59:51

Marmoset Toolbag 5.0 中文汉化版八猴软件中文汉化版免费下载

八猴安装包下载链接 https://pan.baidu.com/s/1Mgy3Mrlrb3Tvtc8w7Zn1nA?pwd6666 提取码：6666 Marmoset Toolbag是由Monkey公司推出一款专业动画渲染软件，也叫做八猴渲染器。该软件主要特征功能是可以进行实时模型观察、材质编辑和动画预览，…...

编程日记 2025/4/28 7:19:50

Java编程中常见错误的总结和解决方法

1. 找不到文件问题描述：尝试编译一个名为ChangeCha.java的文件，但编译器找不到这个文件。错误信息：javac: 找不到文件: ChangeCha.java解决方法：检查文件名是否正确，文件是否存在于当前目录，或者路径是否…...

编程日记 2025/4/28 7:17:39

【GESP】C++三级练习 luogu-B2114 配对碱基链

GESP三级练习，字符串练习（C三级大纲中6号知识点，字符串），难度★✮☆☆☆。题目题解详见：https://www.coderli.com/gesp-3-luogu-b2114/ 【GESP】C三级练习 luogu-B2114 配对碱基链 | OneCoderGESP三级练…...

编程日记 2025/4/28 7:16:35

C++类设计新思路：封装结构体成员变量

C++类设计新思路：封装结构体成员变量引言在C++编程里，类是封装数据和行为的重要手段。常规的类设计直接把成员变量定义在类中，再通过成员函数访问和修改这些变量。不过，有时候我们可以采用不同的设计思路，例如将成员变量封装到结构体里，这样可能会带来一些好处。本文…...

编程日记 2025/4/28 7:16:33

图像预处理-形态学变换

针对二值化图像，其有两个输入，一个输出：输入为原图像、核（结构化元素），输出为形态学变换后的图像。基本操作有腐蚀和膨胀。一.核联想到之前的卷积核，也是一种核。此时的核就跟卷积核不太一…...

编程日记 2025/4/28 7:16:30

关于百度模型迭代个人见解：技术竞速下的应用价值守恒定律

就在前天，在 2025 年 4 月 25 日的百度 Create 开发者大会上，文心大模型 4.5 Turbo 与 X1 Turbo 的发布再次将 AI 行业带入 "涡轮加速" 时代。这两款模型不仅在多模态理解、逻辑推理等核心指标上实现突破，更以80% 的价格降幅重塑行…...

编程日记 2025/4/28 7:15:29

从基础到实战的量化交易全流程学习：1.3 数学与统计学基础——概率与统计基础 | 基础概念

从基础到实战的量化交易全流程学习：1.3 数学与统计学基础——概率与统计基础 | 基础概念第一部分：概率与统计基础第1节：基础概念：随机变量、概率分布、大数定律与中心极限定理一、随机变量与概率分布：用数学描述市场…...

编程日记 2025/5/31 15:56:21

混沌工程领域常用工具的对比分析

以下是混沌工程领域常用工具的对比分析，涵盖主流工具的核心功能、优势、适用场景及局限性，帮助技术团队根据自身需求选择合适的工具：一、故障注入工具对比工具核心特点优势适用场景局限性生态集成开源/付费Chaos MonkeyNetflix 开源，随机终止生产环境实例，模拟硬件/进程…...

编程日记 2025/4/28 7:15:24

LINUX的使用（2）- 安装软件

0.防火墙相关启动防火墙： sudo systemctl start firewalld #查看防火墙列表 firewall-cmd --list-ports 设置防火墙开机自启： sudo systemctl enable firewalld 检查防火墙状态： sudo firewall-cmd --state 允许某个端口（如端…...

编程日记 2025/4/28 7:14:20

一主多从+自组网络，无线模拟量信号传输专治布线PTSD

无线模拟量信号传输模块通过无线方式实现模拟量信号的传输，采集工业现场标准4~20mA电流信号，并将其转换为无线信号进行传输。以下是关于无线模拟量信号传输模块实现无线模拟量信号传输的详细介绍： 一、模块原理无线模拟量信号传输模块的…...

编程日记 2025/5/24 7:34:15

IDEA中使用Git

Git工作流程创建远程仓库现在我们已经在本地创建了一个Git仓库，但是这只能满足我们单人开发，如果想要团队协作，还需要一个远程仓库目前比较流行的远程仓库，有下面这两个： github：https://github.com …...

编程日记 2025/4/28 7:14:18

Go RPC 服务方法签名的要求

在 Go 中，RPC 方法的签名有严格的要求，主要是为了保证方法的调用能够通过网络正确地传输和解析。具体要求如下： 1. 方法必须是导出的 RPC 服务的方法必须是导出的（即首字母大写）。这是因为 Go 的反射机制要求服务方法…...

编程日记 2025/4/28 7:13:11

Ant（Ubuntu 18.04.6 LTS）安装笔记

一、前言本文与【MySQL 8（Ubuntu 18.04.6 LTS）安装笔记】同批次：先搭建数据库，再安装JDK，后面肯定就是部署Web应用。其中Web应用的部署使用 Ant 方式，善始善终，特以笔记。二、准备 &#xf…...

编程日记 2025/4/28 7:13:11

相机DreamCamera2录像模式适配尺寸

在开发中遇到一个问题，相机切换视频模式时，预览时，界面不能充满屏幕两侧有黑边，客户要求修改，在此记录一问题现象： 系统相机在视频模式下预览时如下现象如图1，期望现象如图2: 图1 …...

编程日记 2025/5/23 1:48:04

Animate 中HTMLCanvas 画布下实现拖拽、释放、吸附的拼图游戏

1.舞台上物体拖拽 2.松手以后，检查是否移动到范围内，是则自动吸附 3.播放音效 4.变量1，显示在舞台的动态文本中 1.实现拖拽下面代码实现拖拽和释放地图模块 //记录原始位置 var OriXthis.my_mc.x; var OriYthis.my_mc.y;this.my_mc.on(&q…...

编程日记 2025/4/28 7:13:06

第十一章-PHP表单传值

第十一章-PHP表单传值一，核心概念 1. 表单的基本结构（HTML） 通过HTML的<form>标签定义表单，关键属性包括： action: 指定处理表单数据的PHP脚本路径（如action"process.php"&#xff09…...

编程日记 2025/4/28 7:12:04

互联网大厂Java求职面试：从Java核心到微服务的深度探索

场景引入：在一个阳光明媚的早上，谢飞机满怀信心地走进了一家知名互联网大厂的面试房间。面试官坐在桌子的另一端，手中拿着一份简历，面带微笑地开始了今天的面试。第一轮提问：核心语言与平台面试官： "谢飞机，你好。我看到你熟悉Java SE，能不能简单介绍一下Ja…...

编程日记 2025/5/31 0:30:07

微服务即时通信系统（十二）---入口网关子服务

目录功能设计模块划分业务接口/功能示意图服务实现流程网关HTTP接口网关WebSocket接口总体流程服务代码实现客户端长连接管理封装（connectionManage.hpp） proto文件的编写身份鉴权proto 事件通知proto 各项请求的URL的确定服务端完成入口网关服务类…...

编程日记 2025/5/23 21:36:10

ES练习册

es索引结构和数据实例这里提供索引结构和数据实例提供给大家使用练习，希望大家能够一起成长进步~~~~ #添加索引 PUT /ecommerce_products {"settings": {"number_of_shards": 3,"number_of_replicas": 1,"analysis": {&…...

编程日记 2025/4/28 7:12:02

运算符分为哪几类？哪些运算符常用作判断？简述运算符的优先级

运算符主要分为以下几类‌： ‌算术运算符‌：用于执行基本的数学运算，如加、减、乘、除、取模等。例如：、-、*、/、%‌。‌赋值运算符‌：用于将值赋给变量。例如：、、-、*、/、%‌。‌比较运算符‌&#xff…...

编程日记 2025/5/22 19:58:54

shell编程基础知识及脚本示例

文章目录前言一、shell变量1.命名规则2.定义及使用变量二、shell传递参数1.位置参数2. 任意参数三、shell一维数组0.定义方式1.定义并获取数组的单个元素2.定义并获取数组的所有元素3.定义并获取数组的元素个数4.定义并获取数组的元素索引四、shell条件判断语法五、shell常…...

编程日记 2025/6/2 11:07:01

再学GPIO（一）

GPIO输出模式 STM32的GPIO（General Purpose Input Output 通用输入输出）引脚支持多种输出模式，不同模式决定了引脚的驱动能力和信号特性。STM32的GPIO输出模式主要分为以下4种： 推挽输出（Push-Pull Output）…...

编程日记 2025/4/28 7:10:51

OpenCV彩色图像分割

OpenCV计算机视觉开发实践：基于Qt C - 商品搜索 - 京东灰度图像大多通过算子寻找边缘和区域生长融合来分割图像。彩色图像增加了色彩信息，可以通过不同的色彩值来分割图像，常用彩色空间HSV/HIS、RGB、LAB等都可以用于分割。本节使用inRange…...

编程日记 2025/4/28 7:09:49

django filter 排除字段

在Django中，当你使用filter查询集（QuerySet）时，通常你会根据模型的字段来过滤数据。但是，有时你可能想要排除某些特定的字段，而不是过滤这些字段。这里有几种方法可以实现这一点： 使用exclude方…...

编程日记 2025/4/28 7:09:48

多模态大语言模型arxiv论文略读（四十五）

CAT: Enhancing Multimodal Large Language Model to Answer Questions in Dynamic Audio-Visual Scenarios ➡️ 论文标题：CAT: Enhancing Multimodal Large Language Model to Answer Questions in Dynamic Audio-Visual Scenarios ➡️ 论文作者：Qil…...

编程日记 2025/4/28 7:09:46

Vue3 通过Vue3-Print-Nb在线工单打印模板打印自定义打印打印下载

介绍通过在应用中集成打印功能，用户可以直接从页面打印工单，不用导出文件或使用其他外部工具。节省时间，提高效率，特别是当需要大量打印时。同时也可以将文件模板上传到数据库，提供给部门工作自行下载。开源文档&am…...

编程日记 2025/5/23 23:48:03

视觉“解锁”触觉操控：Franka机器人如何玩转刚柔物体？

集智联机器人（Plug & Play Robotics），简称PNP机器人，是Franka Robotics和思灵机器人金牌合作伙伴，集智联机器人团队成员均来自于国内外机器人行业知名企业，具有较强的学术背景。PNP机器人致力于为客户提…...

编程日记 2025/4/28 7:08:43

相关文章：