echarts的xAxis的axisLabel的使用

最新推荐文章于 2025-03-20 16:26:38 发布

软件测试小菜鸟正在更新中

最新推荐文章于 2025-03-20 16:26:38 发布

阅读量2.1w

点赞数 6

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

本文链接：https://blog.csdn.net/weixin_43258184/article/details/123981564

版权

echarts 专栏收录该内容

5 篇文章

订阅专栏

本文详细解读xAxis.axisLabel的配置，包括interval设置数据分段、formatter函数定制显示样式、inside属性调整位置，并介绍了color、fontSize和fontWeight的设置。了解如何打造个性化x轴刻度显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xAxis的axisLabel是用来设置x轴的刻度以及一些参数的设置。

axisLabel: {
              interval: 10,
              formatter: (value, index) => {
                // 1小时=3600秒
                return `${(value / 3600).toFixed(0)}h`;
              },
              inside: false,
              color: '#fff',
              fontSize: 0.2rem,
              fontWeight: 'bold'
            },

①interval设置的是间隔数，把x轴分成10个间隔，根据x轴的数据自动划分份数值。
②formatter可以是个函数，参数是value和index,返回横坐标每个刻度显示的样式。
③inside,值是true或者false,true的时候，横坐标的值在轴线的上面显示。false的时候在轴线的下方显示。
④color:设置横坐标刻度值的显示颜色
⑤fontSize:设置横坐标刻度字体大小
⑥fontWeight：设置横坐标刻度的字体粗细

同样地，yAxis也有这个属性。