echart图表legend每列固定宽度

修改前:

修改后:

关键代码:

设置一个背景并使之透明,否则宽度不生效,配合formatter使用

formatter: '{a|{name}}',rich:{a: {width: 48,fontSize: 12,backgroundColor: "rgba(11, 39, 52, 0)" // 关键代码,设置一个背景并使之透明,否则宽度不生效,配合formatter使用},}
}

全部代码

option = {xAxis: {type: 'value',show: false,splitLine: {show: false,// lineStyle: {// 	type: 'dashed', // 设置为虚线// 	color: '#ccc' // 虚线颜色// }}},yAxis: {zlevel:10,type: 'category',data: ['10年以上', '5-10年','3-5年', '0-3年'],axisLine: {lineStyle: {color:'#D8D9E5',},},axisLabel: {color: '#1F2450',// x轴字体颜色fontSize: 16,fontFamily:'思源黑体'},axisTick:{show:false,//是否显示刻度lineStyle:{color:'#E5E5E5'}    // x轴刻度的颜色},},legend: {orient: 'horizontal',data: ['普通冰箱', '低温冰箱', '普通冷库', '低温冷库', '冷藏车', '其他'],itemHeight: 6, //设置图标大小itemWidth:6,itemGap: 15, //设置图例的间距// 设置图例的总宽度width: 260,left: 'center',// x:'center',bottom:'5',icon: 'circle', //设置图标形状formatter: '{a|{name}}',textStyle: {rich:{a: {width: 48,fontSize: 12,backgroundColor: "rgba(11, 39, 52, 0)" // 关键代码,设置一个背景并使之透明,否则宽度不生效,配合formatter使用},} }},series: [{data: [172,182,192,202],name: '普通冰箱',type: 'bar',barWidth:'12',label: {show: true,position: 'right',color:'#898CA3',fontFamily:'Arial'},itemStyle: {normal: {color: '#4174FF',}}},{data: [130,130,130,130],name: '低温冰箱',type: 'bar',barWidth:'12',label: {show: true,position: 'right',color:'#898CA3',fontFamily:'Arial'},itemStyle: {normal: {color: '#289BF3',}}},{data: [90,100,110,120],name: '普通冷库',type: 'bar',barWidth:'12',label: {show: true,position: 'right',color:'#898CA3',fontFamily:'Arial'},itemStyle: {normal: {color: '#2BD2E7',}}},{data: [50,60,70,80],name: '低温冷库',type: 'bar',barWidth:'12',label: {show: true,position: 'right',color:'#898CA3',fontFamily:'Arial'},itemStyle: {normal: {color: '#FF930D',}}},{data: [100,120,130,140],name: '冷藏车',type: 'bar',barWidth:'12',label: {show: true,position: 'right',color:'#898CA3',fontFamily:'Arial'},itemStyle: {normal: {color: '#FBCD00',}}},{data: [90,110,120,110],name: '其他',type: 'bar',barWidth:'12',label: {show: true,position: 'right',color:'#898CA3',fontFamily:'Arial'},itemStyle: {normal: {color: '#9C95FF',}}}]
};

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

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

相关文章

高效编写大模型 Prompt 提示词,解锁 AI 无限创意潜能

随着 ChatGPT 的出现,AI 成为新的焦点,有人说过“未来 50%的工作将是提示词工作”,目前很多公司也在开始招聘 Prompt 提示词工程师。Prompt(提示词)成为了连接创意与技术的桥梁,它不仅是简单的指令&#xf…

2024年第七届管理、经济和社会科学国际会议(ICMESS 2024)

2024年第七届管理、经济和社会科学国际会议(ICMESS 2024) 会议简介 2024年第七届管理、经济和社会科学国际会议(ICMESS 2024)将为“管理、经济与社会发展”等最新研究领域的研究人员、专家、学者和行业专家提供一个平台,介绍他们的最新研究…

Python OCR 文字检测使用模型:读光-文字检测-DBNet行检测模型-中英-通用领域

介绍 什么是OCR? OCR是“Optical Character Recognition”的缩写,中文意为“光学字符识别”。它是一种技术,可以识别和转换打印在纸张或图像上的文字和字符为机器可处理的格式,如计算机文本文件。通过使用OCR技术,可…

Vue:快速上手

一、简介 Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,…

信息化教推动数字化学校建设

在数字化学校建造的过程中,许多学校都疏忽了运用这些网络科技渠道的教师和学生,一味的追求学校数字化、智能化建造,没有从根本上意识到教育信息化的出现者或者说体现者的重要性,因而,建造数字化学校,前进教…

微服务架构-聚合设计模式

微服务架构-聚合设计模式 聚合器(Aggregator)设计模式:用于将来自多个微服务的数据,聚合成一个统一的响应,提供给客户端。 聚合模式的核心思想:是使用一个聚合器服务(Aggregator Service&#…

你对仲裁裁决不服怎么办?我教你四个狠招!

你对仲裁裁决不服怎么办?我教你四个狠招! 这个标题是什么意思呢?也就是说,当你(或用人单位)向劳动仲裁委提出仲裁申请后,但劳动仲裁结果没有维护你的权益,或者你不满意,…

[STM32+HAL]LD-1501MG舵机二次开发指南

一、准备材料 核心板:STM32F407ZGT6 舵机:LD-1501MG数字舵机 控制器:24路PWM舵机控制器 二、HAL库配置 开启串口与控制器通信 三、Keil填写代码 1、Servo.c #include "Servo.h" #include "usart.h"uint8_t Message…

python内存马学习

python内存马学习 python内存马学习 python内存马学习环境搭建和复现分析payloadFlask 请求上下文管理机制bypass高版本flask内存马的利用before_request**after_request** teardown_requesterrorhandler相关例题H&NCTF 2024 ezFlask python内存马 环境搭建和复现 from fl…

离大模型落地应用最近的工程化技术(RAG)

虽然大规模语言模型(LLM)在自然语言处理(NLP)方面表现出了其强大的文本生成和理解能力,但是它们在实际应用中仍然面临一些挑战,如处理大规模知识库和实时获取最新信息的能力,并且会产生幻觉。为…

「代码厨房大揭秘:Python性能优化的烹饪秘籍!」

哈喽,我是阿佑,上篇咱们讲了 Socket 编程 —— 探索Python Socket编程,赋予你的网络应用隐形斗篷般的超能力!从基础到实战,构建安全的聊天室和HTTP服务器,成为网络世界的守护者。加入我们,一起揭…

区块链系统开发测试----链码部署开发、系统开发验证

一.检查配置环境 检查虚拟机环境,确保有正在运行的Hyperledger Fabric区块链,并且其中chaincode_basic、credit_chaincode链码可以正常调用 查看chaincode_basic、credit_chaincode链码调用 二.开发征信链码代码 基于现有征信链码,开发征信…

Niantic利用Meta Llama让数字生物栩栩如生

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

华为机考入门python3--(26)牛客26-字符串排序

分类:字符串 知识点: 字符串是否仅由字母构成 my_str.isalpha() 字母列表按小写排序 letters.sort(keylambda x: x.lower()) 题目来自【牛客】 def custom_sort(input_str):letters []non_letters []for char in input_str:if char.isalpha…

【软件工程】【23.04】p1

关键字: 软件模型、提炼、加工表达工具、通信内聚、访问依赖、边界类交互分析、RUP核心工作流、首先测试数据流、软件验证过程、CMMI过程域分类工程类; 软件工程目的、功能需求是需求的主体、结构化方法、耦合、详细设计工具、类、类图、RUP采用用例技…

鲜花门店小程序开发流程:详细教程,让你轻松掌握

想要开发一款专属于自己鲜花门店的小程序吗?不知道从何开始?别担心,本文将为你提供详细的开发流程,帮助你轻松掌握。 1. 注册登录乔拓云网并进入操作后台 首先,你需要注册并登录乔拓云网,然后进入操作后台…

Llama模型家族之使用 Supervised Fine-Tuning(SFT)微调预训练Llama 3 语言模型(三)通过web页面方式微调

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 LangGraph 在windows本地部署大模型 (三) 基于 LlaMA…

Amazon云计算AWS(一)

目录 一、基础存储架构Dynamo(一)Dynamo概况(二)Dynamo架构的主要技术 二、弹性计算云EC2(一)EC2的基本架构(二)EC2的关键技术(三)EC2的安全及容错机制 提供的…

Python自动化办公Excel数据处理实战指南

目录 一、引言 二、需求分析 三、技术选型 四、实战操作 数据读取 数据清洗 数据分析 数据输出 五、学习资源推荐: 六、结语 一、引言 在现代办公环境中,Excel数据处理是一项不可或缺的技能。然而,当数据量庞大、处理流程复杂时&a…

Linux文本文件管理003

★排序、去重、统计★ 1)排序 sort -n按照数值排序 -r降序排列 2)去重 uniq 过滤相邻、重复的行 -c 对重复行计数 3)统计 wc 统计文件中的字节数、单词数、行数 -l 显示行数 今天通过使用grep、awk、cut指令和上面几个选项提取文本文件…