echarts柱状图数据轴如何自定义数据轴，且实现不均分

首先，我们需要实现的效果图如上所示：

注意，x轴的刻度信息时不均分的，且有 9个刻度信息。接下来，描述一下我们的实现思路。

设置X轴最小值min为1000，刻度间隔minInterval为20，splitNumber为8，那么就可以算出，最大值为1160（1000+(9-1)*20）=1160；接下来要实现的是格式化X轴刻度信息了。就附上代码说明了：

xAxis:{
    type:'value', //表示数据轴
    min:1000, // 最小值
    max:1160, // 最大值
    splitNumber:8, //分隔线条数
    position:'top', // x轴位置在上方
    minInterval:20, // 数据轴递增区间
    splitLine:{
        show:false // 分隔线不显示
    },
    axisLabel:{
        color:'#939395', // X轴刻度信息文字颜色
        fontSize:12, // X轴刻度信息文字大小
        formatter:function(value,index){  // 格式化X轴刻度信息为需要显示的
            if(index==0){
                value='1,000';
            }else if(index==1){
                value='5,000';
            }else if(index==2){
                value='10,000';
            }else if(index==3){
                value='50,000';
            }else if(index==4){
                value='100,000';
            }else if(index==5){
                value='500,000';
            }else if(index==6){
                value='1,000,000';
            }else if(index==7){
                value='5,000,000';
            }else if(index==8){
                value='10,000,000';
            }
            return value;
        },
        axisLine:{
            lineStyle:{
                color:'#939395' // 设置X轴颜色
            }
        },
        axisTick:{
            length:0 // X轴刻度没有小竖线
        }
    }
}

 

数据轴自定义刻度信息就可以实现了，下篇文章讲一下如何实现刻度信息和真实数据匹配