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

一、问题

在使用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",
  },
},

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

STM32入门教程-2023版【3-4】按键控制制LED

关注 点赞 不错过精彩内容 大家好,我是硬核王同学,最近在做免费的嵌入式知识分享,帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作! 这篇文章以项目代码的形式实现GPIO输入 一、按键控制LED (1)搭建面包板电…

【Spring 篇】JdbcTemplate:轻松驾驭数据库的魔法工具

欢迎来到数据库的奇妙世界,在这里,我们将一同揭开Spring框架中JdbcTemplate的神秘面纱。JdbcTemplate是Spring提供的一个简化数据库操作的工具,它为我们提供了一种轻松驾驭数据库的魔法。本篇博客将详细解释JdbcTemplate的基本使用&#xff0…

跑代码相关 初始环境配置

是看了这个视频:深度学习python环境配置_哔哩哔哩_bilibili 总结的个人笔记 这个是从零开始配python环境的比较好的经验教程: 深度学习python的配置(Windows) - m1racle - 博客园 (cnblogs.com) 然后关于CUDA和cuDNN&#xff…

基于NFC(215芯片)和酷狗音乐实现NFC音乐墙

前言: 本文方案可以实现直接调起酷狗音乐app自动播放,而非跳转网址 准备工作: nfc toolsnfc task酷狗音乐APPalook浏览器APP 步骤 1.选一首歌 2.右上角选择分享,选择复制链接 复制内容为: 分享胡夏的单曲《爱夏…

U-Net——第一课

一.论文研究背景、成果及意义二、unet论文结构三、算法架构 一.论文研究背景、成果及意义 医学图像分割是医学图像处理与分析领域的复杂而关键的步骤,目的是将医学图像中具有某些特殊含义的部分分割出来,并提取相关特征,为临床诊疗和病理学研…

算法通关村番外篇-LeetCode编程从0到1系列一

大家好我是苏麟 , 今天开始带来LeetCode编程从0到1系列 . 编程基础 0 到 1 , 50 题掌握基础编程能力 大纲 1768.交替合并字符串389. 找不同28. 找出字符串中第一个匹配项的下标283. 移动零66. 加一 1768.交替合并字符串 描述 : 给你两个字符串 word1 和 word2 。请你从 word1…

外汇天眼:CQG 与 TradeStation Securities 的经纪服务集成

TradeStation Securities, Inc.,一家自营的在线股票、ETF、期权和期货交易经纪公司,宣布与CQG合作,CQG是一家为交易员、经纪商、商业套保者和交易所提供高性能技术解决方案的全球供应商,已与TradeStation Securities的经纪服务集成…

MySql -数据库进阶

一、约束 1.外键约束 外键约束概念 让表和表之间产生关系,从而保证数据的准确性! 建表时添加外键约束 为什么要有外键约束 -- 创建db2数据库 CREATE DATABASE db2; -- 使用db2数据库 USE db2;-- 创建user用户表 CREATE TABLE USER(id INT PRIMARY KEY …

linux内存浅析

内存的基本概念 操作系统内存非常重要且比较复杂,其中有许多知识点仍然需要掌握才能更进一步分析程序问题。由于是初次全面系统地接触OS内存,目的是为了全面且低层次地理解linux内存相关概念,不会深入其中原理,所以本章也会尽量避…

Java实现CR-图片文字识别功能(超简单)

一.什么是OCR OCR (Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗、亮的模式确定其形状,然后用字符识别方法将形状翻译成计算…

【信息论与编码】【北京航空航天大学】实验一、哈夫曼编码【C语言实现】(上)

信息论与编码 实验1 哈夫曼编码 实验报告 一、运行源代码所需要的依赖&#xff1a; 1、硬件支持 Windows 10&#xff0c;64位系统 2、编译器 DEV-Redpanda IDE&#xff0c;小熊猫C 二、算法实现及测试 1、C语言源程序 # define _CRT_SECURE_NO_WARNINGS # include <std…

Qt QCheckBox复选按钮控件

文章目录 1 属性和方法1.1 文本1.2 三态1.3 自动排他1.4 信号和槽 2 实例2.1 布局2.2 代码实现 Qt中的复选按钮类是QCheckBox它和单选按钮很相似&#xff0c;单选按钮常用在“多选一”的场景&#xff0c;而复选按钮常用在"多选多"的场景比如喜欢的水果选项中&#xf…

知识】分享几个摄像头的选型相关知识

【知识】分享几个摄像头的选型相关知识 目录 【知识】分享几个摄像头的选型相关知识一、前言二、正文1、先了解一下监控摄像头的种类1.1、云台型&#xff08;云台型一体摄像机&#xff09;1.2、枪机型&#xff08;枪型摄像机&#xff09;1.3、球机型&#xff08;球型摄像机&…

LeetCode-字符串转换整数atoi(8)

题目描述&#xff1a; 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入字符串并丢弃无用的前导空格 检查下一个字符&…

【MySQL】表设计与范式设计

文章目录 一、数据库表设计一对一一对多多对多 二、范式设计第一范式第二范式第三范式BC范式第四范式 一、数据库表设计 一对一 举个例子&#xff0c;比如这里有两张表&#xff0c;用户User表 和 身份信息Info表。 因为一个用户只能有一个身份信息&#xff0c;所以User表和In…

【数学建模】美赛备战笔记 01 美赛指南与竞赛全流程

美赛指南 整篇论文需要在25页内。 六道赛题特点&#xff1a; A、B题涉及到微分方程和物理概念较多&#xff0c;需要一定的专业知识&#xff1b; C题常常涉及到时间序列、机器学习&#xff1b; D题一般是运筹学/网络科学&#xff0c;图论、优化问题&#xff0c;涉及到的概念多…

Day3Qt

1. &#xff08;1&#xff09;完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 …

NAS使用的一些常见命令 ssh sftp 上传 下载 ALL in one

目录 登陆上传/下载内网穿透 登陆 ssh 登陆 ssh usernameserverIP -p portNumsftp 登陆 sftp -P portNum usernameserverIP上传/下载 如ls等&#xff0c;远程服务器操作 如lls等&#xff0c;本机操作&#xff0c;前缀为l 文件 put **** 将本机上文件上传到远程服务器上当…

使用Vivado Design Suite平台板、将IP目录与平台板流一起使用

使用Vivado Design Suite平台板流 Vivado设计套件允许您使用AMD目标设计平台板&#xff08;TDP&#xff09;创建项目&#xff0c;或者已经添加到板库的用户指定板。当您选择特定板&#xff0c;Vivado设计工具显示有关板的信息&#xff0c;并启用其他设计器作为IP定制的一部分以…

Keil编译生成的bin文件自动以版本号命名

Keil编译程序生成bin文件时&#xff0c;如何自动以版本号命名bin文件 一、目的二、方法三、实现过程一、目的二、方法三、实现过程1、脚本形式2、可执行文件形式 一、目的 二、方法 三、实现过程 一、目的 Keil编译程序时&#xff0c;生成的Hex/Bin文件名字是根据Keil中工程…