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

news/2024/11/8 7:03:37/

在这里插入图片描述

<!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.ppmy.cn/news/1545284.html

相关文章

AutoOps 使每个 Elasticsearch 部署都更易于管理

AutoOps 使每个 Elasticsearch 部署都更易于管理

作者&#xff1a;来自 Elastic Ziv Segal&#xff0c;Ori Shafir AutoOps for Elasticsearch 通过性能建议、资源利用率和成本洞察、实时问题检测和解决路径显著简化了集群管理。 虽然 Elasticsearch 是一款功能强大且可扩展的搜索引擎&#xff0c;可提供多种功能&#xff0c;但…
阅读更多...
虚实地址转换

虚实地址转换

虚实地址转换的过程涉及多个关键组件和步骤。以下是虚实地址转换过程的主要涉及点&#xff1a; 一、基本概念 虚地址&#xff08;逻辑地址&#xff09;&#xff1a;由程序提供的地址&#xff0c;是程序在逻辑上所使用的地址。实地址&#xff08;物理地址&#xff09;&#xf…
阅读更多...
如何使用 Python 控制 Android 设备的蓝牙和 WiFi

如何使用 Python 控制 Android 设备的蓝牙和 WiFi

在本文中&#xff0c;我们将探讨如何利用 Python 脚本通过 ADB&#xff08;Android Debug Bridge&#xff09;来控制 Android 设备的蓝牙和 WiFi 状态。我们将提供一个通用的方法&#xff0c;使得切换服务的过程更加简洁和高效。 1. 环境准备 首先&#xff0c;确保你的计算机…
阅读更多...
交换区（Swap Area或Swap Partition）

交换区（Swap Area或Swap Partition）

在操作系统中&#xff0c;交换区&#xff08;Swap Area或Swap Partition&#xff09;扮演着至关重要的角色&#xff0c;主要用于在物理内存&#xff08;RAM&#xff09;不足时提供额外的虚拟内存空间。以下是交换区的主要功能和作用&#xff1a; 一、内存扩展 当系统的物理内…
阅读更多...
Java项目实战II基于Spring Boot的智能家居系统（开发文档+数据库+源码）

Java项目实战II基于Spring Boot的智能家居系统（开发文档+数据库+源码）

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着物联网技术的快速发展和普及&#…
阅读更多...
编程语言之战：AI 之后的 Kotlin 与 Java

编程语言之战：AI 之后的 Kotlin 与 Java

随着人工智能不断重塑科技格局&#xff0c;开发人员越来越面临选择哪些编程语言在 AI 开发方面最有利和有效的任务。 考虑到 AI 和机器学习的快速发展&#xff0c;一种编程语言是否更适合满足这一不断发展的领域的需求&#xff1f; 自 1995 年问世以来&#xff0c;Java 一直是编…
阅读更多...
CC1310 CCS 记录20241107

CC1310 CCS 记录20241107

导 入工程后失败 环境为CCS 10.4导入为12.8 Description Resource Path Location Type Referenced project tirtos_builds_CC1310_LAUNCHXL_release_ccs does not exist in the workspace. Project CC1310_DataReceiver_awce may not build as expected. CC1…
阅读更多...
2024年前三季度币安、OKX等五大交易所上币表现分析

2024年前三季度币安、OKX等五大交易所上币表现分析

随着加密市场竞争的加剧&#xff0c;头部交易所逐渐在上币策略、代币选择、交易活跃度等方面采取了不同的应对策略。Animoca Digital Research近期发布的一份报告&#xff0c;通过对币安、OKX、Bitget、KuCoin和Bybit五大交易所2024年前三季度的上币情况进行了详细分析。本文将…
阅读更多...
最新文章

Copyright @ 2022~2023