echarts自定义legend样式

news2024/11/23 19:10:59

转载自: https://blog.csdn.net/changyana/article/details/126281275
目标样式:
在这里插入图片描述
使用legend中的formatter以及textStyle.rich

legend: { // 对图形的解释部分
          orient: 'vertical',
          right: 10,
          y: 'center',
          icon: 'circle',			// 添加
          formatter: function(name) {	// 添加
            let total = 0
            let target
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            var arr = [
              '{a|' + name + '}',
              '{b|' + ((target / total) * 100).toFixed(2) + '%}',
              '{c|' + target + '}'
            ]
            return arr.join('  ')
          },
          textStyle: {	// 添加
            padding: [8, 0, 0, 0],
            rich: {
              a: {
                fontSize: 15,
                width: 110
              },
              b: {
                fontSize: 15,
                width: 70,
                color: '#c1c1c1'
              },
              c: {
                fontSize: 15
              }
            }
          }
        },

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

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

相关文章

绘制图形、ROI截取、高斯三角形

1、直线 2、圆形 3、椭圆 4、矩形 5、多边形 6、文字 //图形绘制 void test1() {Mat img Mat::zeros(Size(512, 512), CV_8UC3);//生成一个黑色图像用于绘制几何图形//绘制圆形circle(img, Point(50, 50), 25, Scalar(255, 255, 255), -1);//绘制一个实心圆circle(img, Point(…

Flutter 轮播图 flutter_swiper属性说明使用

今天分享的内容是关于图片轮播的实现&#xff0c;使用到的库是flutter_swiper&#xff0c;如果有出现空检查报错的&#xff0c;可以使用flutter_swiper_null_safety 轮播图效果如下&#xff1a; 先贴出基本参数详解&#xff1a; 参数说明itemBuilder列表的构造indicatorLayou…

Redis持久化之RDB和AOF

6、Redis持久化 6.1、背景 首先Redis作为一种缓存性数据库&#xff0c;如果缓存中有数据&#xff0c;他可以很快的把数据返回给客户&#xff0c;至于为什么他可以很快的将数据返回给客户&#xff0c;主要是因为他是一种内存性数据库&#xff0c;不需要额外的IO操作&#xff0…

报错:Destructuring assignments are not supported by current javaScript version

报错信息&#xff1a;当前JavaScript 版本不支持非结构化赋值 报错示例&#xff1a; 报错的原因是&#xff1a;这种语法是EcmaScript6才有的&#xff0c;以往的版本没有&#xff0c;修改一下javaScript的版本即可&#xff0c;方法如下&#xff1a;找到setting----->Languag…

接口自动化测试项目,让你像Postman一样编写测试用例,支持多环境切换、多业务依赖、数据库断言等

项目介绍 接口自动化测试项目2.0 软件架构 本框架主要是基于 Python unittest ddt HTMLTestRunner log excel mysql 企业微信通知 Jenkins 实现的接口自动化框架。 前言 公司突然要求你做自动化&#xff0c;但是没有代码基础不知道怎么做&#xff1f;或者有自动…

解密Vue 3:透过原理看框架,揭开它的神秘面纱

文章目录 1. 响应式系统2. 组件化3. 虚拟 DOM4. 编译器5. 插件系统附录&#xff1a;前后端实战项目&#xff08;简历必备&#xff09; 推荐&#xff1a;★★★★★ Vue 3 是一种用于构建用户界面的现代 JavaScript 框架。它基于响应式编程和虚拟 DOM 技术&#xff0c;并通过组件…

postgresql(一):使用psql导入数据库

使用psql导入数据库 1、概述2、具体问题3、总结 1、概述 大家好&#xff0c;我是欧阳方超。 听说postgresql越来越流行了&#xff1f;psql是一个功能强大的命令行工具&#xff0c;用于管理和操作PostgreSQL数据库。它提供了一个交互式环境&#xff0c;允许用户执行SQL查询、创…

MISA代码配置运行

MISA源码github链接&#xff1a;click here IDE: Pycharm专业版2022.2.2 python3.8 一、创建虚拟环境&#xff1a; 尝试 源码中给了environment.yml,可以用以下命令创建&#xff0c;但可能是由于某些库的版本问题&#xff0c;尝试失败。 conda env create -f environment.…

协议分层与OSI参考模型【图解TCP/IP(笔记三)】

文章目录 协议分层与OSI参考模型协议的分层理解协议的分层OSI参考模型OSI参考模型中各个分层的作用 协议分层与OSI参考模型 协议的分层 OSI参考模型将通信协议中必要的功能分成了7层。通过这些分层&#xff0c;使得那些比较复杂的网络协议更加简单化。 在这一模型中&#xf…

Python_字典包含关系判定方法

Python中的字典是一种无序的数据结构&#xff0c;它由键和对应的值组成 在实际编程中我们经常需要判断一个字典是否包含另一个字典的所有键值对 本文将介绍一种种简单而有效的方法来判定字典之间的包含关系。 a {"a": 1, "b": 2, "c": 3, &q…

zabbix 应用(贼详细!)

目录 一&#xff1a;添加 zabbix 客户端主机 1、关闭防火墙&#xff0c;修改主机名 2、服务端和客户端都配置时间同步 ​3、服务端和客户端都设置 hosts 解析 4、设置 zabbix 的下载源&#xff0c;安装 zabbix-agent2 5、修改 agent2 配置文件 6、启动 zabbix-agent2 7、 在…

OpenCV读取一张8位无符号单通道图像并显示

#include <iostream> #include <opencv2/imgcodecs.hpp> #include <opencv2/opencv.hpp> #include

XXX汽车SAP ERP系统接口提速,助力生产物流业务数据快速处理(投稿数字化月报一)

XXX汽车ERP系统中数据量第一大接口-生产订单下达接口&#xff0c;一直是ESB总线重点关注的重要接口。从2019年项目初发给MOM生产、LES物流系统到现在&#xff0c;下游接收系统已经增加到15个之多。针对该接口下达数据缓慢的情况&#xff0c;SAP项目开发团队攻坚克难&#xff0c…

购买上帝的男孩——好文分享

购买上帝的男孩——好文分享 一个小男孩捏着1美元硬币&#xff0c;沿街一家一家商店地询问&#xff1a;“请问您这儿有上帝卖吗&#xff1f;”店主要么说没有&#xff0c;要么嫌他在捣乱&#xff0c;不由分说就把他撵出了店门。 天快黑时&#xff0c;第二十九家商店的店主热情…

QtMqtt —— 3、搭建Mqtt服务,修改QMqtt源码进行消息订阅测试(附源码)

效果 搭建EMQX即Mqtt服务 为了调试程序,我们需要一台MQTT服务器。EMQ公司官方提供了测试的MQTT服务器,但由于连接数众多,不太稳定,我们需要自己搭建一台MQTT服务器。 官网下载EMQX 启动:      1. 下载 emqx-5.1.1-windows-amd64.zip ,解压      2. 命令行下进入…

UE4 实现控制场景中所有物体透明度功能

本文会讲解如何利用材质参数集简单的实现修改场景中所有物体透明度的功能&#xff0c;讲解地图为第三人称地图 1.创建材质变量集&#xff0c;这里面新建的变量可以在蓝图中控制&#xff0c;这样就能很方便的修改透明度 因为透明度是只有一个值的参数所以创建scalar参数&#x…

Kafka入门,分区的分配再平衡(二十)

分区的分配以及再平衡 1、kafka有四种主流的分区策略&#xff1a;Range,RoundRobin,Sticky,CooperativeSticky。可以通过配置参数partition.assignment.strategy,修改分区的分配策略。默认策略是RanageCooperativeSticky。Kafka可以同事使用多个分区分配策略。 参数描述heartb…

【组合数学 or 枚举】逆序对

C-逆序对_Wannafly挑战赛6 (nowcoder.com) 题意&#xff1a; 思路&#xff1a; 组合数学&#xff0c;无非两种做法&#xff0c;一种是计数DP&#xff0c;另一种是组合数 DP显然不可能&#xff0c;那就组合数 考虑组合数的时候可以把这道题变成一个枚举题 我们去枚举位&…

Android shader编译原理

作者&#xff1a;tmaczhang 1. 什么是着色器编译卡顿&#xff1f; 着色器是在 GPU&#xff08;图形处理单元&#xff09;上运行的代码。当 Flutter 渲染的 Skia 图形后端首次看到新的绘制命令序列时&#xff0c;它有时会生成和编译一个自定义的 GPU 着色器用于该命令序列。使得…

JAVA对象转xml(支持递归生成复杂数据类型)

前言 调用一些soap协议的项目你或许使用的到&#xff0c;也许我是在造轮子&#xff0c;但是我没在网上找到合适的轮子&#xff0c;就根据现有的项目自己造了一个&#xff0c;废话不说&#xff0c;说思路 使用反射获取对象的属性&#xff0c;根据属性的类型做出相应的处理&…