Echarts Y轴自定义设置图片

news2024/11/22 5:35:56

如图Y轴有文字和图片,1-3的图片不同,后面的是特定的css 样式;实现代码

yAxis: {
          type: 'category',
          inverse: true,
          boundaryGap: false,
          axisTick: { show: false }, // 是否展示标记点
          axisLine: { show: false },
          axisLabel: {
            // 坐标轴的标签
            // formatter: '{value}',
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 18, // 刻度标签与轴线之间的距离
            color: 'rgba(0,0,0,0.65)', // 默认轴线的颜色
            rich: {
              a1: {
                backgroundColor: {
                  image: require('./1.png')
                },
                width: 24,
                height: 31
              },
              a2: {
                backgroundColor: {
                  image: require('./2.png')
                },
                width: 24,
                height: 31
              },
              a3: {
                backgroundColor: {
                  image: require('./3.png')
                },
                width: 24,
                height: 31
              },
              b: {
                color: '#fff',
                backgroundColor: 'rgba(231, 244, 252, 1)',
                width: 24,
                height: 24,
                align: 'center',
                borderRadius: 50,
                fontSize: 14,
                fontWeight: 500,
                color: 'rgba(10, 14, 19, 1)',
                padding: [0, 0, 0, 0]
              }
            },
            formatter: (params) => {
              const aIndex = _.findIndex(data2, (item) => {
                return item.name === params
              })
              if (aIndex === 0) {
                return [params + '  ' + '{a1' + '|}']
              } else if (aIndex === 1) {
                return [params + '  ' + '{a2' + '|}']
              } else if (aIndex === 2) {
                return [params + '  ' + '{a3' + '|}']
              } else {
                return [params + '  ' + '{b|' + (aIndex + 1) + '}']
              }
            }
          },
          data: yAxis
        },

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

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

相关文章

C++ Qt开发:CheckBox多选框组件

Qt 是一个跨平台C图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍CheckBox单行输入框组件的常用方法及灵活运用…

京东数据平台有哪些-怎么获取京东数据-京东竞品数据分析工具

如今,许多在线上经营的电商品牌方都着手于去做竞品分析,毕竟竞品分析对品牌的品牌运营及品牌战略决策来说有多种好处,包括但不限于:了解市场需求,把握市场竞争格局;了解竞品推广及营销策略;了解…

【Linux】探索Linux进程优先级 | 环境变量 |本地变量 | 内建命令

最近,我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念,而且内容风趣幽默。我觉得它对大家可能会有所帮助,所以我在此分享。点击这里跳转到网站。 目录 一、进程优先级1.1优先级VS权限1.2为什么要有进程优先级&am…

低成本物联网安全芯片ACL16_S 系列,可应用物联网认证、 SIM、防抄板和设备认证等产品上

ACL16_S 芯片是针对物联网认证、 SIM、防抄板和设备认证需求推出的高安全芯片。芯片采用 32 位 ARMCortex™-M0 系列内核,片内集成多种安全密码模块,包括 RSA/ECC DES/TDES、 SHA-1/-256、 AES-128/-192/-256 等国际安全算法,支持真随机数发…

AtCoder Beginner Contest 332 A~F

A.Online Shopping(计算) 题意: 需要购买 N N N种物品,第 i i i种物品的价格为 P i P_i Pi​,且第 i i i件物品需买 Q i Q_i Qi​件。 商店满 S S S元包邮,不满则需支付 K K K元邮费,问需支付多少钱。 分析&#x…

『 Linux 』进程地址空间存在的意义

文章目录 前言🦕🦖 防止进程对物理内存的非法(危险)访问🦖 进程管理模块与内存管理模块的解耦合🦖 实现进程间的独立性 前言🦕 在文章『 Linux 』进程地址空间概念中提到了进程地址空间的部分概念; 这部分概念主要围绕…

设计模式—观察者模式

观察者模式(Observer Pattern)是一种行为型设计模式,它定义了一种一对多的依赖关系,使得当一个对象的状态发生变化时,所有依赖于它的对象都会得到通知并自动更新。 在观察者模式中,有两个核心角色&#xf…

vue-如何实现带参数跳转页面

文/朱季谦 在vue框架的前端页面上,若要实现页面之间的带参数跳转,可参考以下实现过程: 例如,点击截图中的“查看试卷”,可实现带参跳转到相应的试卷页面,该功能类似查看试卷的详情页面: 假如以…

C#多线程总结

目录 前言 一、异步线程 使用async和await关键字 基于委托实现 二、同步线程 三、Thread线程 开启线程 设置线程优先级 Thread拓展封装 四、ThreadPool线程池 常规使用 设置线程数 线程等待 Thread和ThreadPool比较 通过线程池做一些扩展(定时器类&am…

解析视频美颜SDK的算法:美肤、滤镜与实时处理

如今,美颜技术在视频处理中扮演着关键的角色,为用户提供更加精致的视觉体验。本文将深入探讨视频美颜SDK的算法,聚焦于美肤、滤镜与实时处理等方面,揭示背后的科技奥秘。 一、美肤算法的魅力 视频美颜的一个核心功能就是美肤&am…

被央视报道过的AIGC产品-贝塔创作(BetaCreator)使用指南

产品地址:betacreator.com 真人图 人台图 商品图 商品变色 建议使用浅色服装进行变色,效果更好 如果没有浅色服装,可以先把服装颜色变为白色

redis-学习笔记(Jedis 前置知识)

自定义的 Redis 客户端 咱们可以实现编写出一个自定义的 Redis 客户端 因为 Redis 公开了自己使用的自定义协议 ---- RESP 协议清楚了, 那么通信数据格式就清除了, 就能完成各层次之间的数据传输, 就能开发服务器和客户端 RESP — Redis 的 序列化 协议 特点: 简单好实现快读进…

App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案

防止应用被截图是一个比较常见的需求,主要是出于安全考虑。下面将分别为iOS(苹果系统)、Android(安卓系统)及HarmonyOS(鸿蒙系统)提供防止截屏的方法和示例代码。 在企业内部使用的应用中&…

python学习:浅拷贝与深拷贝详解

copy 一、 & is二、浅拷贝 & 深拷贝(一)、浅拷贝(二)、深拷贝 三、问题 一、’ ’ & ‘is’ ’ 和is是python对象比较常用的两种方式,简单来说,‘ ‘操作符比较对象之间的值是否相等,如 a b 而’is’操作符比较的是对象的身份标识是否相等,即它们是否是同一个…

HNU数据库大作业-世界杯比赛系统

前言 之前做的那个版本bug较多,后进行了大量优化。 此项目是一个前后端分离的项目,前端主要使用htmlcssjs搭建,使用的是layui框架 后端使用php语言,仅实现了简单的查询数据库功能,无法实现多并发查询等复杂情况 数…

jetpack compose 学习(-)

年底了,无聊的时间总是缓慢的,找个事情做一做,打发打发时间,刚好看到jetpack compose 学习学习,毕竟androidStudio 默认创建的项目都带上了这个,学习网站:https://developer.android.com/jetpack/compose/modifiers?hlzh-cn 1. 首先androidStudio创建一个新项目 喜欢kotlin的,…

亚马逊、速卖通自养号测评的安全稳定性与成本优势分析

在跨境电商平台的运营中,买家评价的重要性不言而喻。很多买家在购买产品前都会查看评论,比较同类产品的买家口碑,以做出更明智的购买决策。 因此,测评一直是各大跨境电商平台的一种重要推广方式,测评同时也是很多卖家…

BugKu-Web-Simple_SSTI_1Simple_SSTI_2(浅析SSTI模板注入!)

何为SSTI模块注入? SSTI即服务器端模板注入(Server-Side Template Injection),是一种注入漏洞。 服务端接收了用户的恶意输入以后,未经任何处理就将其作为Web应用模板内容的一部分,模板引擎在进行目标编译渲…

TCP/IP详解——网络基本概念

文章目录 一、网络基本概念1. OSI 7层模型1.1 每层对应的协议1.2 每层涉及的设备1.2.1 物理层设备1.2.2 数据链路层设备1.2.3 网络层设备1.2.4 传输层设备1.2.5 交换机和路由器的应用1.2.6 问题 2. TCP/IP 4层模型3. 物理层传输介质3.1 冲突域 4. 数据链路层4.1 以太网帧结构4.…

socket 套接字

1、套接字介绍 socket起源于Unix,遵循“一切皆文件”出发点,都可以用“打开open –> 读写write/read –> 关闭close”模式来操作。 在设计模式中,Socket把复杂的TCP/IP协议族隐藏在Socket接口后面,Socket去组织数据&#xf…