echarts 调整x类目轴axisLabel间距

最新推荐文章于 2024-05-21 10:20:19 发布

JA+

最新推荐文章于 2024-05-21 10:20:19 发布

阅读量3.9k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_35459724/article/details/131903431

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章讨论了在ECharts中如何处理x轴刻度过于密集的问题。提出了两种解决方案：一是通过外部变量和formatter函数控制标签显示，但可能造成端点标签隐藏和dataZoom时闪烁；二是利用axisLabel.width和overflow属性结合formatter填充空格，以调整标签间距，但这在标签长度不一致时效果不佳。

摘要由CSDN通过智能技术生成

场景

产品认为x轴的刻度太密集，需要稀一点。

调研

关于这个需求，想到的有

xAxis.interval 指定的是所有横坐标的间隔，需要自行计算间隔多少。
xAxis.splitNumber 对类目轴不生效。
xAxis.axisLabel.formatter

方案1

xAxis.axisLabel.formatter

formatter(v,index) 其中的index是xAxis.data中的下标。因此也不能通过 index % 2 的方式控制。

当时可以在外部定义一个变量，因为仅可以显示的axisLabel会调用formatter。

let i = 0;


option = {
    xAxis: {
        axisLabel: {
            formatter(v){
                i++;
                return i % 2 ? v : ''; 
            }
        }
    }
}

这样表示空一个展示一个。

此方案可能导致坐标轴两端的标签被隐藏。且在dataZoom变化时坐标轴会闪烁。

下面方案2相对好一些。

方案2

xAxis: {
    axisLabel: {
        width: 100,
        overflow: 'truncate',
        formatter(v){
            return ' '.repeat(4)+v+' '.repeat(4);
        }
    }
}

由于直接设置axisLabel.width 不生效。因此需要配合overflow来使用。

使用formatter加空格为了使内容撑满设置的width，这样echart计算时会使用width的大小，否则echarts仍然使用文字的长度进行计算。

formatter前后加空格是为了使axisLabel居中对齐。

此方法在横坐标label展示字数不同时就不大好。