首页 > 其他分享 >echart - x轴文字太长换行、文字倾斜、文字竖直展示

echart - x轴文字太长换行、文字倾斜、文字竖直展示

时间:2024-07-09 10:40:56浏览次数:12  
标签:文字 echart 换行 len 字符串 竖直 var params

echart - x轴文字太长换行、文字倾斜、文字竖直展示

设置超过几个字换行显示

  xAxis: {
        axisLabel: {
             formatter: function (params) {
              var str = "";                 // 最终拼接成的字符串
              var paramsLen = params.length;// 获取每项文字的个数
              var len = 4;                  // 每行能显示的字的个数(根据实际情况自己设置)
              var rowNumber = Math.ceil(paramsLen / len); // 换行的话,需要显示几行,向上取整
              if (paramsLen > len) {        //大于设定的len就换行,不大于就不变化
                for (var i = 0; i < rowNumber; i++) {
                  var temp = "";            // 表示每一次截取的字符串
                  var start = i * len;      // 开始截取的位置
                  var end = start + len;    // 结束截取的位置
                  if (i == rowNumber - 1) { // 最后一次不换行
                    temp = params.substring(start, paramsLen);
                  } else {                  // 每一次拼接字符串并换行
                    temp = params.substring(start, end) + "\n";
                  }
                  str += temp;              // 最终拼成的字符串
                }
              } else {                      // 给新的字符串赋值
                str = params;
              }
              return str;                   //返回字符串
            }
          },
      },

文字倾斜

  xAxis: {
        axisLabel: {
        rotate:45   //设置的值大于0向右倾斜,小于0向左
        }
  }

文字竖直显示

 xAxis: {
	axisLabel: {
 		formatter: function (value) {
           	  return value.split("").join("\n");
           },
	 }
 }

标签:文字,echart,换行,len,字符串,竖直,var,params
From: https://www.cnblogs.com/zc-lee/p/18291279

相关文章

  • echarts 折线图拼接
    效果图: <scriptsetuplang="ts">import*asechartsfrom'echarts';import{ref,watch,nextTick,computed}from'vue';import{useRouteParams}from'@/hooks/useRouteParams';import{queryIncreaseTrend......
  • 获取Echarts的geoJson文件(省市/区县)
    1.获取市的级别直接使用阿里云提供的工具直接获取: https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=32.62087018318113&lng=118.43261718749999&zoom=4和 https://map.easyv.cloud/和 https://geojson.hxkj.vip/  2.获取县和区的细到街道的geoJson,需......
  • React+TS前台项目实战(二十六)-- 高性能可配置Echarts图表组件封装
    文章目录前言CommonChart组件1.功能分析2.代码+详细注释3.使用到的全局hook代码4.使用方式5.效果展示总结前言Echarts图表在项目中经常用到,然而,重复编写初始化,更新,以及清除实例等动作对于开发人员来说是一种浪费时间和精力。因此,在这篇文章中,将封装一个“高......
  • 每周一个技能点:POI操作word文档实现替换符替换文字
    引入依赖<dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.1.0</version></dependency><dependency>......
  • 纯 CSS 实现文字智能适配背景效果
    还记得2017年,我们响应朋友的邀约从高德离职出来创业的时候,遇到了一个相对来说有点特殊的需求,动态的文字有长有短,但是需要智能适配背景的颜色变成其对比色。大概效果如下: 仔细看会发现,哪怕半个文字存在于两个不同的背景色之间,这个文字也会被分割成两个颜色。看到这样的需......
  • echarts中Label标签与数据项颜色设置为同一种颜色
    echarts5中默认标签颜色不会跟数据项颜色保持一致,而是全都是黑色。想要实现label颜色和它的数据项颜色一致,需要手动继承颜色,设置label{color:'inherit'}即可解决label标签颜色与数据项颜色一致。  https://echarts.apache.org/examples/zh/editor.html?c=pie-simple注意:......
  • Ant Design Vue文字溢出鼠标滑上显示tooltip。不溢出,鼠标滑上不显示tooltip,溢出显示to
    <templateslot="testContent"slot-scope="{record}"><a-tooltip@mouseenter="showToolTip"overlayClassName="customtooltip_class"......
  • 文字识别技术升级:Airtest与PaddleOCR模型的协作小技巧
    此文章来源于项目官方公众号:“AirtestProject”版权声明:允许转载,但转载必须保留原链接;请勿用作商业或者非法用途一、前言在进行自动化测试的过程中,ocr文字识别一直是大家最想要实现以及最需要的能力,今天就来介绍一个由百度飞浆提供的一个免费的ocr识别库——PaddleOCR,以及探......
  • 邮件显示统计图表echarts-java+phantomjs实现
    邮件显示统计图表echarts-java+phantomjs实现项目背景是产品业务上的订阅推送,纯java后端实现,通过邮件将统计报表发送给用户。这里会涉及一些关键点:首先是统计图表的生成,我们采用常见的echarts,简单易用,支持图表类型丰富美观;java后端实现可使用echarts-java来实现图表的生成......
  • Windows部署语音转文字项目_Whisper
    Windows部署语音转文字项目_WhisperWindows部署语音转文字项目_Whisper一、前置安装准备Github源仓库,Whisper下载安装whisper及其依赖项官方有两种部署方法,一种是通过默认pip源拉取安装:以管理员身份运行powershell,输入如下命令pipinstall-Uopenai-whisper因国内网络......