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",},
},

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Halcon灰度共生矩阵

Halcon灰度共生矩阵 图像的纹理一般具有重复性,纹理单元往往会以一定的规律出现在图像的不同位置,即使存在一些形变或者方向上的偏差,图像中一定距离之内也往往有灰度一致的像素点,这一特性适合用灰度共生矩阵来表现。 灰度共生矩…

string的模拟实现

string的模拟实现 msvc和g下的string内存比较成员变量构造函数与析构函数拷贝构造函数赋值拷贝c_str、size和capacity函数以及重载[]、clear、expand_capacity迭代器与遍历reservepush_back、append、insert字符串比较运算符erase<<流提取 >>流插入resizefindsubst…

以太坊开发者会议回顾:坎昆升级、硬分叉与布拉格

作者&#xff1a;Christine Kim Galaxy研究副总裁 编译&#xff1a;秦晋 碳链价值 2024年1月4日&#xff0c;以太坊开发人员齐聚Zoom for All Core Developers Execution (ACDE) Call #178 上。ACDE电话会议通常由以太坊基金会协议负责人Tim Beiko主持&#xff0c;是一个开发人…

910b上跑Chatglm3-6b进行流式输出【pytorch框架】

文章目录 准备阶段避坑阶段添加代码结果展示 准备阶段 配套软件包Ascend-cann-toolkit和Ascend-cann-nnae适配昇腾的Pytorch适配昇腾的Torchvision Adapter下载ChatGLM3代码下载chatglm3-6b模型&#xff0c;或在modelscope里下载 避坑阶段 每个人的服务器都不一样&#xff0…

Python 面向对象之元类

Python 面向对象之元类 【一】一切皆对象 【1】元类 元类&#xff08;metaclass&#xff09;是Python中用于创建类的类。在Python中&#xff0c;类是对象&#xff0c;而元类就是类的类它们控制类的创建过程&#xff0c;允许你定制类的行为Python中内置的默认元类是type我们用…

团结引擎 | 发布微信小游戏的那些坑

问题1 问题&#xff1a;Failed to download file Build/安装包.framework.js.unityweb. Loading web pages via a file:// URL without a web server is not supported by this browser. Please use a local development web server to host content, or use the Build and Ru…

MiniTab的正态性检验结果的分析

正态性检验概述 可使用 正态性检验 确定数据是否不服从正态分布。 执行菜单&#xff1a;要执行正态性检验&#xff0c;请选择统计 > 基本统计 > 正态性检验。 正态性检验 的假设 对于正态性检验&#xff0c;进行如下假设。 H0&#xff1a;数据服从正态分布。H1&…

什么是博若莱新酒节?

在红酒圈儿里混&#xff0c;一定不能不知道博若莱新酒节&#xff0c;这是法国举世闻名的以酒为主题的重要节日之一。现已成为世界范围内庆祝当年葡萄收获和酿制的节日&#xff0c;被称为一年一度的酒迷盛会。 云仓酒庄的品牌雷盛红酒LEESON分享博若莱位于法国勃艮第南部&#x…

静态关键字:static

static的作用 static是静态的意思&#xff0c;可以修饰成员变量和成员方法。 static修饰成员变量表示该成员变量只在内存中只存储一份&#xff0c;可以被共享访问、修改。 成员变量 分为2类 静态成员变量&#xff08;有static修饰&#xff0c;属于类&#xff0c;内存中加载…

智汇云舟受邀出席《城市轨道交通公共安全防范安全评价标准》专家评审会

1月3日&#xff0c;由中国城市公共交通协会归口的《城市轨道交通公共安全防范安全评价标准》&#xff08;以下简称“《标准》”&#xff09;送审稿审查会顺利召开。该标准由同方威视技术股份有限公司、上海新海信通信息技术有限公司和中安保实业集团有限公司主编&#xff0c;北…

Spring事务控制见解6

7.Spring事务控制 7.1.事务介绍 7.1.1.什么是事务&#xff1f; 当你需要一次执行多条SQL语句时&#xff0c;可以使用事务。通俗一点说&#xff0c;如果这几条SQL语句全部执行成功&#xff0c;则才对数据库进行一次更新&#xff0c;如果有一条SQL语句执行失败&#xff0c;则这…

如何脱离keil在vscode上实现STM32单片机编程

【VScode Embedded IDE】Keil工程导入VScode&#xff0c;与Keil协同开发MCU_vscode编辑keil工程-CSDN博客 从零开始的51单片机——VsCodeEIDE环境搭建_vscodeeidesdcc-CSDN博客 结合一下这两个大佬的博客就是可以实现STM32的编程了 主要要点&#xff1a; &#xff08;1&#…