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

使用 ECharts 在 Vue3 中柱状图的完整配置解析

news 来源：原创 2025/5/18 14:19:59

一、初始化图表实例

const chart = echarts.init(chartRef.value);

二、Tooltip 提示配置

tooltip: {trigger: 'axis',axisPointer: {type: 'line' // 支持 'line' 或 'shadow' 类型，指示器样式},backgroundColor: 'rgba(0,0,0,0.7)',textStyle: { color: '#fff' },formatter: '{b}：{c}人' // 显示格式：类目名 + 数据值 + 单位
}

悬浮提示框在用户鼠标滑过柱状图时展示详细数据，设置了黑色半透明背景与白色文字以适配深色主题。

三、图表网格布局

grid: {top: 60,left: 40,right: 60,bottom: 40
}

合理留白设置避免图表元素与边缘重叠，确保文字标签完整显示。

四、X轴配置（年龄段）

xAxis: {name: '年龄',type: 'category',data: ['60~70岁', '70~80岁', '80~90岁', '90~100岁', '100岁以上'],axisLine: { lineStyle: { color: '#ccc' } },axisLabel: { color: '#fff' },nameTextStyle: {color: '#fff',fontSize: 14}
}

设置分类类型 X 轴，标签为不同年龄段，轴线与标签样式统一使用白色字体提升可读性。

五、Y轴配置（人数）

yAxis: {type: 'value',name: '人数',axisLine: { show: false },splitLine: { lineStyle: { color: '#3a3a3a' } },axisLabel: { color: '#fff' },nameTextStyle: {color: '#fff',fontSize: 14,padding: [10, 0, 10, -30]}
}

数值型 Y 轴，隐藏轴线、添加灰色分隔线，使用 padding 将坐标轴名称左移以避免与坐标轴重叠。

六、Series 配置（柱状图样式）

series: [{type: 'bar',data: [300, 580, 760, 500, 100],barWidth: 30,itemStyle: {borderRadius: [5, 5, 0, 0], // 圆角处理color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#33ffff' },{ offset: 1, color: '#0c6c88' }])},label: { show: false }
}]

七、注意事项以及配置项解释

① grid 配置项控制什么？

grid 控制的是图表绘图区（也叫“网格区域”）在整个 echarts 容器中的位置和大小，主要作用是控制图表四周的边距，比如坐标轴标签、坐标轴名称、图例等是否会被遮挡或显示不全。

② y轴 name 是如何控制距离的？

name 是坐标轴的名字，会显示在 x 轴下方（或 y 轴左边）。

nameTextStyle 控制名字的样式，包括颜色、字体大小等。

若要精细控制 name 和坐标轴之间的距离，可使用 padding属性。

③ color: new echarts.graphic.LinearGradient(...) 是什么含义？

这是在设置柱状图的渐变颜色填充，LinearGradient 用于创建一个线性渐变色：

参数 (0, 0, 0, 1) 表示渐变方向：从上 (0) 到下 (1)

offset: 0 表示顶部，颜色为 #33ffff

offset: 1 表示底部，颜色为 #0c6c88

整体效果：柱子从上到下由亮青色渐变到深蓝绿色，提升视觉层次感。

八、完整代码

<template><div class="dashboard"><div class="header"><div class="item orange"><div class="label">服务站点</div><div class="value">56</div></div><div class="item cyan"><div class="label">居家护理员</div><div class="value">840</div></div><div class="item lime"><div class="label">助餐人员</div><div class="value">360</div></div></div><div ref="chartRef" class="chart"></div></div>
</template><script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';const chartRef = ref(null);onMounted(() => {const chart = echarts.init(chartRef.value);chart.setOption({tooltip: {trigger: 'axis',axisPointer: {type: 'line' // 可以是 'line' 或 'shadow'},backgroundColor: 'rgba(0,0,0,0.7)',textStyle: {color: '#fff'},formatter: '{b}：{c}人'},grid: {top: 60,left: 40,right: 60,bottom: 40},xAxis: {name: '年龄',type: 'category',data: ['60~70岁', '70~80岁', '80~90岁', '90~100岁', '100岁以上'],axisLine: { lineStyle: { color: '#ccc' } },axisLabel: { color: '#fff' },nameTextStyle: {color: '#fff',fontSize: 14,  // 增大字体大小},},yAxis: {type: 'value',name: '人数',nameTextStyle: { color: '#fff', padding: [0, 0, 10, 0] },axisLine: { show: false },splitLine: { lineStyle: { color: '#3a3a3a' } },axisLabel: { color: '#fff' },nameTextStyle: {color: '#fff',fontSize: 14,  // 增大字体大小padding: [10, 0, 10, -30],  // 增加左侧的间距，使名字向左移动},},series: [{type: 'bar',data: [300, 580, 760, 500, 100],barWidth: 30,itemStyle: {borderRadius: [5, 5, 0, 0],color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#33ffff' },{ offset: 1, color: '#0c6c88' }])},label: {show: false}}]});
});
</script><style scoped>
.dashboard {background: #001c3c;padding: 20px;color: #fff;
}.header {display: flex;justify-content: space-around;margin-bottom: 20px;text-align: center;
}.item {flex: 1;
}.label {font-size: 20px;color: #fff;
}.value {font-size: 24px;font-weight: bold;
}.orange .value {color: #ff8800;
}.cyan .value {color: #33ffff;
}.lime .value {color: #aaff66;
}.chart {width: 100%;height: 200px;position: relative;top: -20px;
}
</style>

使用 ECharts 在 Vue3 中柱状图的完整配置解析

一、初始化图表实例 const chart echarts.init(chartRef.value);二、Tooltip 提示配置 tooltip: {trigger: axis,axisPointer: {type: line // 支持 line 或 shadow 类型，指示器样式},backgroundColor: rgba(0,0,0,0.7),textStyle: { color: #fff },formatter: {…...

编程日记 2025/5/18 14:19:59

Ubuntu实现远程文件传输

目录安装 FileZillaUbuntu 配套设置实现文件传输在Ubuntu系统中，实现远程文件传输的方法有多种，常见的包括使用SSH（Secure Shell）的SCP（Secure Copy Protocol）命令、SFTP（SSH File Transfer P…...

编程日记 2025/5/17 15:01:04

AI驱动软件工程：SoftEngine 方法论与 Lynx 平台实践分析

引言在过去数十年中，软件开发领域历经了从瀑布模型到敏捷开发，再到DevOps的深刻变革。然而，面对当今快速变化的市场需求和复杂的软件系统，这些方法仍然显露出明显的局限性。近年来，基于大语言模型（LLM&am…...

编程日记 2025/4/30 15:04:53

Vue基础(一) 基础用法

1.取消生产提示 Vue.config.productionTip false; Vue.config.devtools true; //运行开发调试 2.hello小案例需要注意如下几点： 1.必须要有一个模板，其实就是一个html组件 2.新建一个Vue实例，并且通过el与容器建立绑定关系&#xff0…...

编程日记 2025/4/30 15:03:41

文心一言开发指南08——千帆大模型平台推理服务API

编程日记 2025/5/18 13:22:17

矩阵区域和 --- 前缀和

目录一：题目二：算法原理三：代码一：题目题目链接：1314. 矩阵区域和 - 力扣（LeetCode） 二：算法原理三：代码 class Solution { public:vector<vector<int…...

编程日记 2025/5/18 13:12:34

全局id生成器生产方案

1.只要求不重复版本（常用于分布式确定一个实体的id） uuid（ MAC 地址、时间戳、名字空间（Namespace）、随机或伪随机数、时序等元素，计算机基于这些规则生成的 UUID 是肯定不会重复的。） UUID 作…...

编程日记 2025/4/30 15:02:36

DES与AES算法深度解析：原理、流程与实现细节

DES与AES算法深度解析：原理、流程与实现细节 1. DES算法详解 1.1 算法架构 DES采用16轮Feistel网络结构，核心处理流程如下： 输入64位明文 → IP初始置换 → 16轮迭代处理 → 左右交换 → IP⁻末置换 → 输出64位密文 1.2 核心处理流程 …...

编程日记 2025/5/18 14:05:56

大厂Java面试深度解析：Dubbo服务治理、WebSocket实时通信、RESTEasy自定义注解与C3P0连接池配置实践

第一轮基础问答面试官：请解释Dubbo服务注册发现的完整流程，以及Sentinel如何实现流量控制？ xbhog：Dubbo通过Registry协议将服务地址注册到ZooKeeper，消费者订阅服务节点变更。Sentinel通过ResourceRegistry注册资源…...

编程日记 2025/5/18 13:16:48

【Qt】Qt换肤，使用QResource动态加载资源文件

【Qt】使用QResource动态加载资源文件 0.前言对于简单的应用，我们可以直接读取 QSS 样式表文件来实现换肤。但一般样式里还带有图片等资源的路径，如果通过相对路径来加载，不便于管理，不过好处是替换图片方便。我们也可以使用 Q…...

编程日记 2025/5/18 14:04:10

五种机器学习方法深度比较与案例实现（以手写数字识别为例）

正如人们有各种各样的学习方法一样，机器学习也有多种学习方法。若按学习时所用的方法进行分类，则机器学习可分为机械式学习、指导式学习、示例学习、类比学习、解释学习等。这是温斯顿在1977年提出的一种分类方法。有关机器学习的基本概念，…...

编程日记 2025/5/18 13:49:00

【18】爬虫神器 Pyppeteer 的使用

目录一、Pyppeteer 介绍二、安装库三、快速上手 Python爬虫案例 | Scrape Center 在前面我们学习了 Selenium 的基本用法，它功能的确非常强大，但很多时候我们会发现 Selenium 有一些不太方便的地方，比如环境的配置，得安装好…...

编程日记 2025/5/18 13:16:48

封装js方法构建树结构和扁平化树结构

在JavaScript中，构建树结构和将树结构扁平化是常见的操作。下面我将提供两个方法，一个用于从扁平化的数据中构建树结构，另一个用于将树结构扁平化。构建树结构假设我们有一个扁平化的数据列表，每个节点对象包含id和parentId属…...

编程日记 2025/5/18 14:02:40

服务器和数据库哪一个更重要

在当今数字化的时代，服务器和数据库都是构建和运行各种应用系统的关键组成部分，要说哪一个更重要，其实很难简单地给出定论。服务器就像是一个强大的引擎，为应用程序提供了稳定的运行环境和高效的计算能力。它负责接收和处理来自…...

编程日记 2025/5/7 10:49:23

Nginx 核心功能与 LNMP 架构部署

一、基于授权的访问控制 1.1 功能概述 Nginx 的基于授权的访问控制通过用户名和密码验证机制，限制用户对特定资源的访问。其实现逻辑与 Apache 类似，但配置更简洁，适用于需保护敏感目录或页面的场景（如管理后台）。 …...

编程日记 2025/5/2 17:03:07

Python程序开发，麒麟系统模拟电脑打开文件实现

在Python开发中，模拟电脑打开文件操作（即用默认程序打开文件），可以使用os.system()方法或subprocess模块来执行系统命令。以下是使用os库实现模拟打开文件的代码示例： 使用os.system()方法 import osfile_path &quo…...

编程日记 2025/5/18 12:39:44

打造惊艳的渐变色下划线动画：CSS实现详解

引言：为什么需要动态下划线效果？ 在现代网页设计中，微妙的交互效果可以显著提升用户体验。动态下划线特效作为一种常见的视觉反馈方式，不仅能够引导用户注意力，还能为页面增添活力。本文将深入解析如何使用纯CSS实现一…...

编程日记 2025/5/18 12:42:18

gitmodule怎么维护

目录 ci-cd脚本豆包文档 ci-cd脚本 git submodule init git submodule update cd /var/lib/jenkins/workspace/wvp-server-Dji/wvp-server git checkout Dji2 cd /var/lib/jenkins/workspace/wvp-server-Dji/cloud-sdk git checkout master 豆包文档...

编程日记 2025/5/18 14:17:17

企业战略管理(设计与工程师类)-2-战略规划及管理过程-2-外部环境分析-PESTEL模型实践

PESTEL在AFI框架中的作用 AFI 战略框架（Analyze, Formulate, Implement——哈佛大学商学院的教授 Michael Porter）是企业战略管理中的一个重要理论模型，帮助企业系统性地分析和制定战略。作为第一阶段Analyze的第一步，PESTEL…...

编程日记 2025/5/9 16:09:56

基于arduino的温湿度传感器应用

温湿度传感器深度解析与多平台开发实战一、温湿度传感器代码实现（Arduino平台） 1. 基础传感器驱动（DHT11） #include <DHT.h> #define DHTPIN 2 #define DHTTYPE DHT11DHT dht(DHTPIN, DHTTYPE);void setup() {Serial.begin(9600);dht.begin(); }void loop() {del…...

编程日记 2025/5/13 9:09:28

【AI提示词】机会成本决策分析师

提示说明具备经济学思维的决策架构师，擅长通过机会成本模型分析复杂选择场景提示词 # Role: 机会成本决策分析师## Profile - language: 中文 - description: 具备经济学思维的决策架构师，擅长通过机会成本模型分析复杂选择场景 - background: 经济…...

编程日记 2025/5/18 13:14:07

基于Springboot + vue实现的列书单读书平台

项目描述本系统包含管理员和用户两个角色。管理员角色： 用户管理：管理系统中所有用户的信息，包括添加、删除和修改用户。书单信息管理：管理书单信息，包括新增、查看、修改、删除和查看评论。在线书店管理&…...

编程日记 2025/5/18 14:07:18

「Mac畅玩AIGC与多模态07」开发篇03 - 开发第一个 Agent 插件调用应用

一、概述本篇介绍如何在 macOS 环境下，基于 Dify 平台自带的网页爬虫插件工具，开发一个可以提取网页内容并作答的 Agent 应用。通过使用内置插件，无需自定义开发，即可实现基本的网页信息提取与智能体回答整合。二、环境准备 1. 确认本地部署环境确保以下环境已搭建并…...

编程日记 2025/5/18 13:35:10

Headers池技术在Python爬虫反反爬中的应用

1. 引言在当今互联网环境中，许多网站都部署了反爬虫机制，以防止数据被大规模抓取。常见的反爬手段包括： User-Agent检测（检查请求头是否来自浏览器）IP频率限制（短时间内同一IP请求过多会被封禁&#xff…...

编程日记 2025/5/18 13:44:57

端到端电力电子建模、仿真与控制及AI推理

在当今世界，电力电子不再仅仅是一个专业的利基领域——它几乎是每一项重大技术变革的支柱。从可再生能源到电动汽车，从工业自动化到航空航天，对电力转换领域创新的需求正以前所未有的速度增长。而这项创新的核心在于一项关键技能：…...

编程日记 2025/5/18 13:12:35

Java云原生+quarkus

一、Java如何实现云原生应用？ 传统的 Java 框架（如 Spring Boot）虽然功能强大，但在云原生场景下可能显得笨重。以下是一些更适合云原生的轻量级框架： Quarkus(推荐) 专为云原生和 Kubernetes 设计的 Java 框架。支持…...

编程日记 2025/5/18 12:26:10

在yolo中Ultralytics是什么意思呢？超越分析的智能

在YOLO（You Only Look Once）目标检测框架中，Ultralytics 是一家专注于计算机视觉和机器学习技术的公司，同时也是YOLO系列模型（如YOLOv5、YOLOv8等）的官方开发和维护团队。以下是关键点解析： 1. …...

编程日记 2025/5/18 13:18:08

TRAE历史版本下载参考

https://lf-cdn.trae.com.cn/obj/trae-com-cn/pkg/app/releases/stable/{此处替换为版本号}/win32/Trae%20CN-Setup-x64.exe 比如版本号为1.0.11939 那么链接为https://lf-cdn.trae.com.cn/obj/trae-com-cn/pkg/app/releases/stable/1.0.11939/win32/Trae%20CN-Setup-x64.exe …...

编程日记 2025/5/18 12:35:40

C++类与对象基础

目录 1.取地址运算符重载 2.初始化列表 3.类型转换既前面所讲的C类与对象知识，C类与对象——基础知识-CSDN博客 C类与对象——构造函数与析构函数-CSDN博客 C类与对象——拷贝构造与运算符重载_c拷贝对象和对象调用同一函数的输出区别怎么实现-CSDN博客本章我们…...

编程日记 2025/5/3 13:55:24

C# 继承详解

继承是面向对象程序设计（OOP）中的核心概念之一，它极大地增强了代码的重用性、扩展性和维护性。本篇文章将详细讲解C#中的继承机制，包括基础概念、语法特法、多重继承（通过接口实现）、继承的规则和实际应用示…...

编程日记 2025/5/18 13:51:49

多源数据整合与数据虚拟化：构建灵活、高效的数据架构

多源数据整合与数据虚拟化：构建灵活、高效的数据架构引言随着大数据时代的到来，数据的多样性和复杂性已经成为了企业面临的一大挑战。不同来源的数据在格式、结构以及存储方式上各不相同，传统的单一数据源管理方法难以应对海量且多样化的数据需求。多源数据整合与数据虚拟…...

编程日记 2025/5/18 12:43:40

代码随想录第39天｜leetcode198.打家劫舍、leetcode213.打家劫舍II 、leetcode337.打家劫舍III

1.198. 打家劫舍 - 力扣（LeetCode） 当前房屋偷与不偷取决于前一个房屋和前两个房屋是否被偷，所以就可以得到相应的dp数组。即，dp[i] max(dp[i-2]nums[i],dp[i-1]); int rob(vector<int>& nums) {//dp[i]&#xff1a…...

编程日记 2025/5/18 13:51:48

C++ 如何计算两个gps 的距离

C 完全可以计算三维空间中的 WGS84 坐标点之间的精确欧氏距离。关键是： 要先把经纬度海拔 (lat, lon, alt) 转换成 ECEF（地心地固坐标系），然后计算欧氏距离即可。 ✅ 使用 GeographicLib::Geocentric 实现三维距离计算&#xf…...

编程日记 2025/5/16 9:44:37

通过全局交叉注意力机制和距离感知训练从多模态数据中识别桥本氏甲状腺炎|文献速递-深度学习医疗AI最新文献

Title 题目 Hashimoto’s thyroiditis recognition from multi-modal data via globalcross-attention and distance-aware training 通过全局交叉注意力机制和距离感知训练从多模态数据中识别桥本氏甲状腺炎 01 文献速递介绍桥本氏甲状腺炎（HT）&a…...

编程日记 2025/5/11 7:40:19

网络原理—应用层和数据链路层

IP协议 ⭐IP协议报头上面的知识地址管理使用一套地址体系(IP协议)，来描述互联网上每个是被所在的位置。 IP数据报的长度(拆包和组包) 可以对CUP进行拆包，可以多个IP报头装一个CUP数据。 8位生存时间(TTL) 这里的时间不是传统意义上的，…...

编程日记 2025/5/5 10:41:04

Cell Res | Stereo-seq揭示人类肝癌浸润区促进肝细胞-肿瘤细胞串扰、局部免疫抑制和肿瘤进展

有同学给了一篇23年的空间文章，研究的一个核心概念是肿瘤边缘的"侵袭区"，文章中定义的是以肿瘤边缘为中心的500微米宽的区域，这里是肿瘤细胞侵袭和转移的活跃前沿，包含复杂的细胞成分及独特的分子特征，存在免…...

编程日记 2025/4/30 14:34:18

Mybatis-plus代码生成器的创建使用与详细解释

Mybatis-plus代码生成器的创建使用与详细解释一、代码生成器概述 1. 定义(什么是代码生成器) 在软件开发过程中，存在大量重复性的代码编写工作，例如实体类、Mapper 接口、Service 接口及实现类等。代码生成器就是为了解决这类问题而诞生的工具。MyBa…...

编程日记 2025/5/18 14:11:22

swagger2升级至openapi3的利器--swagger2openapi

背景： 因为项目需要升级JDK，涉及到swagger2升级至openapi3的情况。由于swagger 2和openapi 3的语法差距太大，需要对yaml进行升级。无奈单个yaml文件的内容太大，高至4万多行，手动进行语法的转换肯定是不可能了&#xff…...

编程日记 2025/5/18 13:04:50

私有云与虚拟化攻防2（OpenStack渗透场景，大部分云平台都是基于此进行二次开发）

虚拟化和私有云的一些区别虚拟化只是简单资源虚拟化，一虚多私有云除了能够实现虚拟化以外更重要的是服务自助化、自动化什么是Openstack OpenStack是一个开源的云计算管理平台项目，是属于基础设施即服务（IaaS），是一个云操作系统。 Nova（控制）提供计算资源，虚拟机、容…...

编程日记 2025/5/18 13:19:33

前缀和后缀和 --- 寻找数组的中心下标

题目链接寻找数组的中心下标给你一个整数数组 nums ，请计算数组的中心下标。数组中心下标是数组的一个下标，其左侧所有元素相加的和等于右侧所有元素相加的和。如果中心下标位于数组最左端，那么左侧数之和视为 0 ，因为…...

编程日记 2025/5/18 13:09:34

关于插值和拟合（数学建模实验课）

文章目录 1.总体评价2.具体的课堂题目 1.总体评价学校可以开设这个数学建模实验课程，我本来是非常的激动地，但是这个最后的上课方式却让我高兴不起哦来，因为老师讲的这个内容非常的简单，而且一个上午的数学实验，基本…...

编程日记 2025/5/18 2:24:18

深入学习解读：《数据安全技术数据分类分级规则》【附全文阅读】

该文详细阐述了数据安全技术的数据分类分级规则，内容分为基本原则、数据分类规则、数据分级规则及数据分类分级流程四大部分。基本原则强调科学实用、动态更新、就高从严及53原则（虽表述不清，但可理解为多重原则的结合），同时要求边界清晰、点面结合。数据分类规…...

编程日记 2025/4/30 14:29:52

Windows环境下用pyinstaller将python脚本编译为exe文件

下载 https://pypi.org/project/pyinstaller/#filespyinstaller-6.13.0-py3-none-win_arm64.whl 安装 cmd命令行中执行：pip install pyinstaller-6.13.0-py3-none-win_amd64.whl得先安装pythonpip若找不到命令，需要加到环境变量测试 pyinstaller --ve…...

编程日记 2025/5/13 21:57:50