首页 > 其他分享 >Echarts图表X轴文本过长导致展示不全

Echarts图表X轴文本过长导致展示不全

时间:2023-05-05 19:22:54浏览次数:41  
标签:展示 标签 axisLabel nameTextStyle 图表 文本 Echarts

今天就遇到如题目所说问题。遇到问题当然取看官方文档喽,链接奉上ECharts-axis

博主使用的ECharts版本号为5.4.5

这个问题效果图如下:

Snipaste_2023-05-05_19-01-30

可以看到x轴文本太长,导致部分x轴标签无法正常显示,在这里提供两种解决办法,并告诉大家博主踩的坑!

nameTextStyle

相信我,这是个坑

在文档里,xAxis有一个属性nameTextStyle,可以修改坐标轴名称的文本样式。实际测试中,这个属性是没办法更改的。

axisLabel

实际用起来有效

方案一

通过改变文本展示角度,从而让文本展示出来。

方案二

先使用 axisLabel.interval:0让所有标签进行展示,然后使用axisLabel.width=[number]设置你要展示标签文本的长度,再使用axisLabel.overflow:'truncate',让超出宽度的文本进行省略。

xAxis: [
  {
    type: 'category',
    axisLabel: {
      show: true,
      interval: 0,
      color: '#1e9fff',
      width: 80,
      overflow: 'truncate'
    },
    data: seriesArr[0],
    axisPointer: {
      type: 'shadow'
    }
  }
],

这是该案例所使用的配置,展示效果如下!

Snipaste_2023-05-05_19-12-03

展示正常,问题解决

标签:展示,标签,axisLabel,nameTextStyle,图表,文本,Echarts
From: https://www.cnblogs.com/liyublogs/p/17375153.html

相关文章

  • CSS实现单行、多行文本溢出显示省略号
    代码单行文字溢出打点div{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}多行文字溢出打点div{width:100px;overflow:hidden;text-overflow:ellipsis;......
  • 第5-0讲,Text 文本控件
    Entry只能输入一行文字,如果想要输入多行文字,需要使用Text文本控件importtkinterastkfromtkinterimportmessagebox#创建窗体window=tk.Tk()#设置窗体的标题window.title('多行输入-text')#设置窗体的大小window.geometry('300x200')#创建textcontext=tk.Text......
  • C# Pdf添加文本水印(iTextSharp)
    第一步通过Nuget添加iTextSharp引用具体实现代码如下:///<summary>///添加文本水印///</summary>///<paramname="pdfPath">pdf文件</param>///<paramname="outPath">输出文件位置</param>......
  • 富文本的使用 [wangEditor5]
    1.安装npminstall@wangeditor/editor--save//安装Vue2组件(可选)npminstall@wangeditor/editor-for-vue--save2.引用2.1js部分注册组件import{Editor,Toolbar}from'@wangeditor/editor-for-vue'exportdefaultVue.extend({components:{Editor,T......
  • 要创建富文本内容?Kendo UI Angular组件有专门的编辑器应对!
    您的Angular应用程序可能需要允许用户添加带有格式化选项的文本、图像、表格、外观样式和/或链接,使用KendoUIforAngular的编辑器,可以轻松搞定这些!KendoUIforAngular是专业级的AngularUI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angul......
  • Java正则提取中间段文本
    核心正则开始字符串(.*)结束字符串示例Stringa="【权益到账提醒】尊敬的客户,您好!您已获得权益礼包,【兑换码】:11223344。请妥善保管好您的兑换码,一经兑换,立即失效。";Matchermatcher=Pattern.compile("【兑换码】:(.*)。请妥善保管好您的兑换码").matcher(a);if(ma......
  • 倒序输出文件中的文本(英文文本,Linux环境)
    /*倒序显示文本内容:linux环境*/#include<stdio.h>#include<stdlib.h>#defineSLEN81intmain(void){char*file="hello.txt";charch;FILE*fp;longcount,last;if((fp=fopen(file,"rb"))==NULL){//只......
  • vue el-input中点击符号,文本框中显示符号
    需求点击+|()符号,页面中光标位置,展示对应的符号点击完,光标留在原位 代码<el-form-itemprop="kwspec"label='监测关键词'><el-inputtype="textarea"placeholder="请输入监测关键词"ref="inputRef"@blur="inputBlur"v-model=&q......
  • iOS MachineLearning 系列(10)—— 自然语言分析之文本拆解
    iOSMachineLearning系列(10)——自然语言分析之文本拆解本系列的前几篇文章介绍了iOS中有关图像和视频处理的API,视觉处理主要有Vision框架负责,本篇起,将介绍在iOS中MachineLearning领域相关的自然语言处理框架:NaturalLanguage。1-简介NaturalLanguage是iOS种提供的一种处理自......
  • 基于ChatGPT的文档知识库客服系统-支持上传网址/文本/docx等数据
    现在,很多公司都有自己的内容知识库,会产生大量的碎片话的内部知识,但是这样内部知识难以整合搜索。我开发的文档知识库客服系统gofly.v1kf.com,可以应用于企业内部知识库管理,用户可以使用自然语言提问,让ChatGPT自动归纳总结企业知识信息,帮助员工快速获取所需知识,提升资源流转效率......