Vue3+Echarts:柱状图的图例(legend)不显示

news2025/4/17 19:20:47

一、问题

在使用Echarts绘制堆积柱状图的时候,想给柱状图添加图例,但是添加完后,图例不显示。

二、问题及解决

  • 原因
    这里图例不显示,是因为legend里面图例的文字内容跟series里每一项的name的内容不一致,必须得两者一致才会显示:

在这里插入图片描述

  • 将两者的内容统一之后,之前添加的图例就显示了:

在这里插入图片描述

三、其他

1、修改图例的大小
itemWidth: 15, // 设置图例的宽度为15像素
itemHeight: 10, // 设置图例的高度为10像素
2、修改图例的位置
padding: [35, 5, 0, 0], //对应的位置分别是:上右下左
3、修改图例的文字颜色
textStyle: {
    color: "#fff",
},
  • 文字颜色为白色:
    在这里插入图片描述
4、图例相关的代码汇总
legend: {
  data: ["Android", "iOS", "Web"],
  padding: [35, 3, 0, 0], //图例内边距:上 右下左
  itemWidth: 15, // 设置每个图例标记的宽度为15像素
  itemHeight: 10, // 设置每个图例标记的高度为10像素
  textStyle: {
    color: "#fff",
  },
},

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

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

相关文章

【已解决】c语言编写的lib如何调用

本博文源于笔者在vs2015正在编写的lib想要调用的问题,正常的操作是将项目生成lib,但是然后又如何操作呢,本博文就是解决这样的问题 文章目录 问题再现步骤1:编写lib.h与lib.c步骤2:生成lib步骤3:添加用得到…

nginx基础面试题以及配置文件解析和命令控制

目录 1、nginx是什么 2、nginx的特点 3、为什么中国大陆有:百度、京东、新浪、网易、腾讯、淘宝等这么多用户使用nginx 4、nginx 的内部技术架构 上一期我们配置安装了nginx接着讲一下nginx配置文件的解析和nginx 命令控制 感谢观看!希望能够帮助到…

Kali Linux——aircrack-ng无线教程

目录 一、准备 二、案例 1、连接usb无线网卡 2、查看网卡信息 3、开启网卡监听 4、扫描wifi信号 5、抓取握手包 6、强制断开连接 7、破解握手包 三、预防 一、准备 1、usb无线网卡(笔记本也是需要用到) 2、密码字典(Kali 系统自带…

随机数种子seed

之前的方案 只在train.py文件里添加了这两句代码,但是还不够 import random random.seed(42) # 保证随机结果可复现 现在的方案 在utils.py包里添加 def seed_torch(seed42):random.seed(seed) # Python的随机性os.environ["PYTHONHASHSEED"] str(…

Java进阶十—JDBC

Java进阶十—JDBC 一.说明 用Java语言操作Mysql,首先需要学习Mysql MySQL入门教程-CSDN博客 二.JDBC的由来以及定义 JDBC是什么? Java数据库连接(Java Database Connectivity)简称JDBCJDBC是Java操作各数据库的一种规范,是Java语言中用来…

全网最细RocketMQ源码一:NameSrv

一、入口 NameServer的启动源码在NameStartup,现在开始debug之旅 二、createNamesrcController public static NamesrvController createNamesrvController(String[] args) throws IOException, JoranException {System.setProperty(RemotingCommand.REMOTING_VER…

倍福(Bechhoff) CX8090嵌入式PC控制器开发没有想像中的那么难

笔者曾2023年初曾为云南阜外医院新风系统开发自动控制系统。医院所有新风设备和公区照明全部采用倍福嵌入式PC控制器实现智能控制。其中新风和供水计量通过CX8090实现控制;公区照明通过BC9050实现控制;并采用美国邦纳人机界面(THM035B)实现远…

MES系统数据采集的几种方式

生产制造执行MES系统具有能够帮助企业实现生产数据收集与分析、生产计划管理、生产过程监控等的功能板块,在这里小编就不一一介绍了,主要讲讲它的数据采集功能板块,可以说,数据采集是该系统进行数据统计与生产管理等后续工作的基础…

Logstash应用-同步ES(elasticsearch)到HDFS

1.场景分析 现有需求需要将elasticsearch的备份至hdfs存储,根据以上需求,使用logstash按照天级别进行数据的同步 2.重难点 数据采集存在时间漂移问题,数据保存时使用的是采集时间而不是数据生成时间采用webhdfs无法对文件大小进行设置解决…

uniapp 设置底部导航栏

uniapp 设置原生 tabBar 底部导航栏。 设置底部导航栏 一、创建页面,一定要在 pages.json 文件中注册。 二、在 pages.json 文件中,设置 tabBar 配置项。 pages.json 页面 {"pages": [...],"globalStyle": {...},"uniIdRout…

软件测试|探索Python中获取最高数值的几种方法

前言 在数据分析、统计和编程领域,经常会遇到需要从一组数值中找出最高数值的情况。Python 作为一门功能丰富的编程语言,提供了多种方法来实现这一目标。在本文中,我们将探索几种获取最高数值的方法,帮助大家在不同情况下选择最适…

Python 潮流周刊#34:Python 3.13 的 JIT 方案又新又好

△△请给“Python猫”加星标 ,以免错过文章推送 你好,我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容,大部分为英文。本周刊开源,欢迎投稿[1]。另有电报频道[2]作为副刊,补充发布更加丰富的资讯,…

滚柱导轨精度等级是如何划分?

滚柱导轨的精度等级主要根据其表面精度、滑块与导轨表面的公差以及定位精度等性能指标来划分。根据不同的标准和应用需求,精度等级的划分存在一定的差异。 1、行走平行度:普通级(无标注/C)5μm,高级(H&…

如何在数学建模竞赛中稳定拿奖

✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心&…

NIO通信代码示例

NIO通信架构图 1.Client NioClient package nio;import constant.Constant;import java.io.IOException; import java.util.Scanner;public class NioClient {private static NioClientHandle nioClientHandle;public static void start() {nioClientHandle new NioClientHa…

【Spring Cloud】Sentinel流量限流和熔断降级的讲解

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《Spring Cloud》。🎯🎯 &am…

网工内推 | 高级网工,H3C认证优先,朝九晚六,周末双休

01 万德 招聘岗位:高级网络工程师 职责描述: 1、项目交付:项目管理和交付,包括项目前期的规划、实施以及后期的运维支持、项目验收等。 2、技术支持:为客户及合作伙伴提供网上问题远程和现场支持;对公司内…

【C++】STL 算法 ⑥ ( 二元谓词 | std::sort 算法简介 | 为 std::sort 算法设置 二元谓词 排序规则 )

文章目录 一、二元谓词1、二元谓词简介2、 std::sort 算法简介3、 代码示例 - 为 std::sort 算法设置 二元谓词 排序规则 一、二元谓词 1、二元谓词简介 " 谓词 ( Predicate ) " 是一个 返回 布尔 bool 类型值 的 函数对象 / 仿函数 或 Lambda 表达式 / 普通函数 , …

全链路压力测试有哪些主要作用

全链路压力测试是在软件开发和维护过程中不可或缺的一环,尤其在复杂系统和高并发场景下显得尤为重要。下面将详细介绍全链路压力测试的主要作用。 一、全链路压力测试概述 全链路压力测试是指对软件系统的全部组件(包括前端、后端、数据库、网络、中间件等)在高负载…

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

前言&#xff1a; 整理vue/vue3项目中修改界面浏览器上面的文字和图标的方法。 效果&#xff1a; vue2/vue3: 默认修改 public/index.html index.html <!DOCTYPE html> <html lang"en"><head><link rel"icon" type"image/sv…