echart横坐标（纵坐标）的值竖着显示的实现方法

曾经终败给现在 2021-09-29 23:56 994阅读 0赞

## echart横坐标（纵坐标）的值竖着显示的实现方法 ##

xAxis : [
    　　{
    　　　　type : 'category',
    　　　　data : xData,
    　　　　axisLabel:{
    　　　　interval: 0,
    　　　　formatter: function (value) {
    　　　　　　//x轴的文字改为竖版显示
    　　　　　　var str = value.split("");
    　　　　　　return str.join("\n");
    　　　　}
    　　}
    　　}
    ],

有时候需要进行判断，X轴项目多的时候才竖着，X轴项目少的时候不需要竖着还是横着。修改formatter

formatter: function (value) { 
        　　　　　　//x轴的文字改为竖版显示
        　　　　　　if(xData.length>6){ 
        　　　　　　var str = value.split("");
        　　　　　　return str.join("\n");
    			}else{ 
    			return value;   //必须加上这个，不然栏目小于6个的 不显示标注
    			}
        　　　　　　
        　　　　}

实现效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190719110523560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，994人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 横坐标倾斜设置的实现方法详解

系列文章目录 -------------------- 文章目录系列文章目录前言一、使用 rotate 属性调整横坐标标签倾斜角度

比眉伴天荒/ 2023年10月12日 22:40/ 0 赞/ 17 阅读

相关 echarts的横坐标的值竖着显示的实现方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG4ubmV

谁践踏了优雅/ 2023年06月25日 04:53/ 0 赞/ 8 阅读

相关 echarts中横坐标值显示不全(自动隐藏)解决方案

echarts中横坐标值显示不全自动隐藏解决方案 echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。如下图，当横

叁歲伎倆/ 2022年10月29日 07:36/ 0 赞/ 616 阅读

相关 echarts添加纵坐标的单位

百度搜索出来的结果这种方法是通过格式化来添加单位的，但是单位并未显示在左上角（1）yAxis : \[ \{ type : ‘value’, max:

r囧r小猫/ 2022年10月02日 12:44/ 0 赞/ 511 阅读

相关 Echarts横坐标倾斜,顶部显示数字

最近项目使用到Echarts，所以学习了下根据API，实现Echarts很简单，在这就不多说了，下面就说说项目中碰到的一些需求 1.由于横坐标很多，导致数据不能展示完整，

╰+哭是因爲堅強的太久メ/ 2022年08月20日 09:18/ 0 赞/ 112 阅读

相关 Echarts纵坐标显示为整数小数

1 chart.DoubleDeckBarChart = function (getIDParam, Legend, xAxisData, seriesName1, s

矫情吗；*/ 2021年12月21日 23:47/ 0 赞/ 634 阅读

相关 echart 横坐标倾斜

根据API\[url=http://echarts.baidu.com/option.html\title\]http://echarts.baidu.com/option.

淡淡的烟草味﹌/ 2021年10月08日 06:30/ 0 赞/ 583 阅读

相关 echart横坐标（纵坐标）的值竖着显示的实现方法

echart横坐标（纵坐标）的值竖着显示的实现方法 xAxis : [ 　　{ 　　　　type : 'category', 　　　　da

曾经终败给现在/ 2021年09月29日 23:56/ 0 赞/ 995 阅读

相关 echart横坐标（纵坐标）的值竖着、斜着、省略号（…）显示的实现方法

目录 echart横坐标（纵坐标）的值竖着、斜着、省略号（…）显示的实现方法 1、竖着显示 2、根据项目多少，判断标注是横着还是竖着 3、斜着标注 4、只

阳光穿透心脏的1/2处/ 2021年07月24日 19:17/ 0 赞/ 1175 阅读

相关 echarts中横坐标值显示不全(自动隐藏)解决方案

echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。如下图，当横轴时间为13天时，echarts会自动隔天显示 ![C

柔情只为你懂/ 2021年05月12日 11:51/ 0 赞/ 709 阅读