echats中y轴x轴都是类目轴怎么写最大值最小值

Question

echats中y轴x轴是类目轴怎么写最大值最小值
如图

var myChart6 = echarts.init(document.getElementById('myChart6'));

 option6 = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
                var tar;
                if (params[1].value != '-') {
                    tar = params[1];
                }
                else {
                    tar = params[0];
                }
                return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
            }
        },
        legend: {
            x:"right",
            y:"top",
            padding:[0,25,0,0],
            data:['信用等级MIN-信用等级MAX'],
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            axisTick: {
                show: false
            },
            axisLine:{
                lineStyle:{
                    color:'#b0b0b0'
                }
            },
            type : 'category',
            splitLine: {show:false},
            data : [2015,2016,2017,2018,2019]
        },
        yAxis: {
            axisTick: {
                show: false
            },
            axisLine:{
                lineStyle:{
                    color:'#b0b0b0'
                }
            },
            type : 'category',
            splitLine :{
                show:true,
                lineStyle:{
                    type:'dashed',
                    color: ['#aaa', '#ddd']
                }
            },
            data:['C','CC','CCC','B','BB','BBB','A','AA','AAA']
        },
        series: [
            {
                name: '信用等级MIN-信用等级MAX',
                type: 'bar',
                stack: '总量',
                barWidth : 12,
                itemStyle:{
                    emphasis: {
                        // 圆角边框
                        barBorderRadius: 7
                    },
                    normal:{
                        // 圆角边框
                        barBorderRadius: 7,
                        color:'#87bbf5'
                    }
                },
                label: {
                    normal: {
                        show: false,
                        position: 'top'
                    }
                },
               data:['AA','AAA','BB','CC','BBB'],
                // data:[8, 9, 7, 4, 8],
            },
            {
                name: '信用等级MIN',
                type: 'bar',
                stack: '总量',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                // 隐藏辅助
                data:['A','BB','B','B','C'],
                // data:[1,4,5,3,1,3],
            },
        ]
    };


        myChart6.setOption(option6);

Answer 1

在ECharts中，如果x轴或y轴采用类目轴，最大值和最小值的配置方式会有所不同。

对于y轴而言，可以使用min和max来配置轴界最小值和最大值，例如：

yAxis: {
  type: 'category',
  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  min: '周一',  // y轴最小值
  max: '周日'   // y轴最大值
}

对于x轴而言，在类目轴中min和max属性并不起作用，而是需要设置boundaryGap来来控制轴界是否在两端留白。具体来说，如果boundaryGap为 true 则留出空白，为 false 则不留出空白。

举一个例子，我们可以这样来配置x轴：

xAxis: {
  type: 'category',
  data: ['1', '2', '3', '4', '5', '6', '7'],
  boundaryGap: false  // 轴界不留空白
}

当然，如果x轴或y轴最大值和最小值需要设置的比较灵活，我们还可以通过程序来自动计算最小值和最大值的方法来动态地设置。例如：

// 计算y轴最小值、最大值
const yAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const yMin = yAxisData[0];
const yMax = yAxisData[yAxisData.length - 1];

// 计算x轴最小值、最大值
const xAxisData = ['1', '2', '3', '4', '5', '6', '7'];
const xMin = xAxisData[0];
const xMax = xAxisData[xAxisData.length - 1];

// 配置y轴和x轴
option = {
  yAxis: [{
    type: 'category',
    data: yAxisData,
    min: yMin,
    max: yMax
  }],
  xAxis: [{
    type: 'category',
    data: xAxisData,
    min: xMin,
    max: xMax
  }]
};

在上述代码中，我们通过计算y轴和x轴中的最小值和最大值，并动态地设置到配置项中来实现了最大值和最小值的自适应配置。