Echats柱状图的横坐标用图片显示

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片作为横坐标示例 - ECharts</title><!-- 引入 ECharts --><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body><!-- 为图表提供容器 --><div id="chart" style="width: 600px; height: 400px;"></div><script>// 初始化图表var myChart = echarts.init(document.getElementById('chart'));// 定义数据和配置const data = [{ value: 'A', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } },{ value: 'B', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } },{ value: 'C', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } },{ value: 'D', label: { image: 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960' } }]const rich = {}data.forEach(item=>{rich[item.value] ={height: 50,width: 50,backgroundColor:{ image: item.label.image }}})var option = {xAxis: {type: 'category',data:data,axisLabel: {formatter: function (value) {return `{${value}| }`; // 格式化标签},rich:rich}},yAxis: {type: 'value'},series: [{type: 'bar',data: [120, 200, 150, 80]}]};myChart.setOption(option);</script>
</body>
</html>

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

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

相关文章

vscode php Launch built-in server and debug, PHP内置服务xdebug调试,自定义启动参数配置使用示例

在vscode中&#xff0c;当我们安装了插件 PHP Debug&#xff08;xdebug.php-debug&#xff09;或者 xdebug.php-pack 后 我们通过内置默认的 php xdebug配置启动php项目后&#xff0c;默认情况下我们在vscode中设置断点是不会生效的&#xff0c;因为我们的内置php服务默认启动时…

城镇保障性住房管理:SpringBoot系统创新点

5系统详细实现 5.1 用户信息管理 管理员可以对用户信息进行添加&#xff0c;修改&#xff0c;删除操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.2 房屋类型管理 管理员可以对房屋类型信息进行添加&#xff0c;修改&#xff0c;删除操作。具体界面如图5.2所示…

积极助力信创工作,爱加密荣获麒麟系统优秀合作伙伴

近日&#xff0c;麒麟软件安全生态联盟2024年第三次工作会议顺利举行。麒麟软件安全生态联盟由工业和信息化部网络安全产业发展中心指导成立&#xff0c;旨在联合打造原创性、引领性的自主操作系统内生安全技术体系和自主创新安全生态。会上&#xff0c;麒麟软件相关领导为爱加…

用图说明 CPU、MCU、MPU、SoC 的区别

CPU CPU 负责执行构成计算机程序的指令&#xff0c;执行这些指令所指定的算术、逻辑、控制和输入/输出&#xff08;I/O&#xff09;操作。 MCU (microcontroller unit) 不同的 MCU 架构如下&#xff0c;注意这里的 MPU 表示 memory protection unit MPU (microprocessor un…

navicat pg库安装mysql fdw 外表扩展

在Windows上手动安装mysql_fdw&#xff08;MySQL Foreign Data Wrapper&#xff09;通常涉及一系列步骤&#xff0c;包括下载源码、编译、配置和测试。以下是一个详细的指南&#xff1a; 一、下载mysql_fdw源码 访问mysql_fdw的GitHub发布页面&#xff0c;选择最新版本的源码…

LongVU :Meta AI 的解锁长视频理解模型,利用自适应时空压缩技术彻底改变视频理解方式

Meta AI在视频理解方面取得了令人瞩目的里程碑式成就&#xff0c;推出了LongVU&#xff0c;这是一种开创性的模型&#xff0c;能够理解以前对人工智能系统来说具有挑战性的长视频。 研究论文 "LongVU&#xff1a;用于长视频语言理解的时空自适应压缩 "提出了一种革命…

Oracle OCP认证考试考点详解082系列09

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 41. 第41题&#xff1a; 题目 41.Examine the description of the EMPLOYEES table NLS_DATE_FORMAT is set to DD-MON-YY Which query…

【NOIP提高组】引水入城

【NOIP提高组】引水入城 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 在一个遥远的国度&#xff0c;一侧是风景秀美的湖泊&#xff0c;另一侧则是漫无边际的沙漠。该国的行政 区划十分特殊&#xff0c;刚好构成一个N行M列的矩形&#xff…

apache poi 实现下拉框联动校验

apache poi 提供了 DataValidation​ 接口 让我们可以轻松实现 Excel 下拉框数据局校验。但是下拉框联动校验是无法直接通过 DataValidation ​实现&#xff0c;所以我们可以通过其他方式间接实现。 ‍ 步骤如下&#xff1a; 创建一个隐藏 sheet private static void create…

盘点和嗨格式一样好用的10款数据恢复!!

亲爱的朋友们&#xff0c;相信大家都知道&#xff0c;一旦不小心删除了重要文件或者遇到了硬盘故障&#xff0c;心情简直如同坐过山车一般此起彼伏&#xff0c;那么这个时候就需要一款好的数据恢复工具来解救我们的数据危机。今天就来给大家推荐嗨格式数据恢复以及另外这10款我…

【Python】怎么创建一个新的conda环境,并在其中安装所需的软件包

最近在运行前同事留下的包的时候&#xff0c;遇到了numpy包和pandas包不匹配的问题&#xff0c;见前一篇&#xff1a; 屋漏偏逢连夜雨&#xff0c;今天打开spyder的时候&#xff0c;也没法运行spyder了。 于是&#xff0c;痛定思痛&#xff0c;打算换一个conda环境&#xff0…

通讯录(C 语言)

目录 一、通讯录设计思路1. 伪代码设计思路2. 代码设计思路 二、代码实现三、程序运行演示四、整体分析 一、通讯录设计思路 1. 伪代码设计思路 通讯录可以用来存储 100 个人的信息&#xff0c;每个人的信息包括&#xff1a;姓名、性别、年龄、电话、住址。 提供方法&#x…

海明码校验和纠错

1.计算1011海明码的校验位 根据公式nk<-1 &#xff08;n是信息码位数&#xff0c;1011就是4&#xff09; 则 k3 43<-1 由上可知校验码有3个 又因为 4 2 1 可以列出下列表格 7654321d3d2d1x2d0x1x01011 x0 x1 x2 分别为3个校验码的位置 又因为 7421 642 541…

SpringMVC的执行流程以及运行原理

文章目录 SpringMVC的执行流程以及运行原理一、引言二、SpringMVC核心组件与执行流程1、SpringMVC核心组件1.1、DispatcherServlet配置 2、SpringMVC执行流程 三、SpringMVC配置文件及注解四、总结 SpringMVC的执行流程以及运行原理 一、引言 SpringMVC作为Spring框架的核心模…

Unity XR Interaction Toolkit 开发教程(4)XR Origin:追踪参考系与相机高度【3.0以上版本】

获取完整课程以及答疑&#xff0c;工程文件下载&#xff1a; https://www.spatialxr.tech/ 视频试看链接&#xff1a; 4.XR Origin&#xff1a;追踪参考系与相机高度【Unity XR Interaction Toolkit 跨平台开发教程】&#xff08;3.0以上版本&#xff09; 系列教程专栏&#…

【基于Zynq FPGA对雷龙SD NAND的测试】

一、SD NAND 特征 1.1 SD 卡简介 雷龙的 SD NAND 有很多型号&#xff0c;在测试中使用的是 CSNP4GCR01-AMW 与 CSNP32GCR01-AOW。芯片是基于 NAND FLASH 和 SD 控制器实现的 SD 卡。具有强大的坏块管理和纠错功能&#xff0c;并且在意外掉电的情况下同样能保证数据的安全。 …

小程序与服务器通信webSocket和UDPSocket

UDPSocket 官方文档链接UDPSocket webSocket 官方文档链接 WebSocket 任务 先用webSocket 测试成功后&#xff0c;由于WSS的问题最后决定用UDPSocket&#xff0c;两个都记录一下。 UDPSocket 项目里主要就使用了以下几个方法, 先用wx.createUDPSocket创建UDP Socket 实例&a…

HTMLCSS:爱上班的猫咪

这段HTML和CSS代码是一个SVG动画的示例&#xff0c;它描述了一个包含猫咪和笔记本电脑的复杂场景 HTML <div class"content"><div class"container"><svg id"bongo-cat" xmlns"http://www.w3.org/2000/svg" xmlns:x…

使用SearXNG-搭建个人搜索引擎(附国内可用Docker镜像源)

介绍 SearXNG是聚合了七十多种搜索服务的开源搜索工具。我们可以匿名浏览页面&#xff0c;不会被记录和追踪。作为开发者&#xff0c;SearXNG也提供了清晰的API接口以及完整的开发文档。 部署 我们可以很方便地使用Docker和Docker compose部署SearXNG。下面给出Docker部署Se…

基于前后端分离架构,SaaS云平台与私有云部署的智慧校园源码,java电子班牌源码

基于前后端分离架构&#xff0c;SaaS云平台与私有云部署的智慧校园源码&#xff0c;java电子班牌源码&#xff0c;自主研发&#xff0c;自主版权&#xff0c;上百个学校应用案例&#xff0c;支持二次开发。 在信息技术飞速发展的今天&#xff0c;教育领域也迎来了一场革命性的变…