前端 - echarts柱状图x轴坐标有没有办法间隔一个显示?

问题描述

问 题

如图，我用了ECharts的这个柱状图，下面x轴的数字太密集了，能不能让x轴的坐标间隔一个显示数字？

xAxis: {
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
            lineStyle: {
                color: 'rgba(255,255,255,0.2)'
            }
        },
        interval: 5,
        type: 'value',
        axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value}',
            textStyle: {
                color: 'rgba(255,255,255,0.7)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.2)'
            }
        },
        show: true,
        data: ['0%', '', '10%', '', '20%', '', '30%', '', '40%', '', '50%', '', '60%', '', '70%', '', '80%', '', '90%', '', '100%']
    },

解决方案

建议使用这个方法 axisLabel:{rotate:-30} 换个角度思考问题 横着放不下可以竖着放，当然也可以斜着放 这就是我要说的这个方法。

这篇关于前端 - echarts柱状图x轴坐标有没有办法间隔一个显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！