解决Echarts折线图x轴数据较多，展示不全的问题

原创已于 2022-02-17 18:47:26 修改 · 1.1w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2022-02-17 18:39:15 首次发布

工作常见问题专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在Echarts-for-React图表中配置X轴，通过设置`axisLabel.interval`为0确保每个数据点都有标签，并使用`axisLabel.rotate`属性调整标签的倾斜角度，以优化横轴标签的布局。此外，还提及了可选的`margin`和`textStyle`属性来调整标签与轴线的距离及字体样式。

echarts-for-react

在配置中设置

xAxis: {
                data: dateList,
                axisLabel: {
                    interval: 0, // 设置数据间隔
                    rotate: -38, // 标题倾斜
                    // margin: 5, //刻度标签与轴线之间的距离
                    // textStyle: {
                    //  fontSize: 9, //横轴字体大小
                    //  color: "#000000",//颜色
                    // },
                },
            },