Echarts自定义Y轴刻度值范围(即最小值与最大值)和等分间隔-优快云博客

本文链接：https://blog.youkuaiyun.com/LSL1618/article/details/110484091

博客介绍了基于Echarts 4.9.0版本，使用min属性限制Y轴刻度最小值，max属性限制最大值，interval属性强制设置等分间隔，axisLabel.formatter属性将数字值格式化为固定小数位百分比值来自定义Y轴刻度显示内容。

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

xAxis: {
	type: 'category',
	nameTextStyle: {
		align: 'center'
	},
	data: yearMonths
},
yAxis: {
	type: 'value',
	min: 0.9000,
	max: 1.1000,
	interval: 0.0200,
	// data: [0.9000, 0.9200, 0.9400, 0.9600, 0.9800, 1.0000],// 只有type为category时才有效
	axisLabel: {
		formatter: function (value, index) {
			return (value * 100).toFixed(2) + "%";
		}
	}
},

min属性限制Y轴刻度最小值，max属性限制Y轴刻度最大值，interval属性强制设置Y轴刻度等分间隔，axisLabel.formatter属性用于自定义Y轴刻度显示内容，此处是将数字值格式化为固定小数位的百分比值。

注：基于Echarts 4.9.0版本。

参考示例：

// echarts获取颜色值
function getRGBNumber() {
    // 包含min和max
    let min = 0, max = 255;
    return Math.floor(Math.random() * (max - min + 1) ) + min;
}
function getRGBString() {
    return "rgb(" + getRGBNumber() + "," + getRGBNumber() + "," + getRGBNumber() + ")";
}
function initEChart() {
    let legendData = ['及时率', '合格率'];
    let yearMonths = ['2021-06-06', '2021-07-07', '2021-08-08', '2021-09-09'];
    let rateOne = [], rateTwo = [];
    let myChart = echarts.init($("#my_chart")[0]);
    myChart.setOption({
        title: {
            text: ''
        },
        legend: {
            data: [
                {
                    name: legendData[0],
                    icon: 'diamond'
                },
                {
                    name: legendData[1],
                    icon: 'rect'
                }
            ]
        },
        tooltip: {
            show:  true,
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            nameTextStyle: {
                align: 'center'
            },
            data: yearMonths
        },
        yAxis: {
            type: 'value',
            min: 0.00,
            max: 1.00,
            interval: 0.10,
            axisLabel: {
                formatter: function (value, index) {
                    return (value * 100).toFixed(0) + "%";
                }
            }
        },
        series: [
            {
                name: legendData[0],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 14,
                data: rateOne,
                itemStyle: {
                    color: getRGBString()
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: function (params) {
                        return (params.value * 100).toFixed(0) + "%";
                    }
                },
                tooltip: {
                    formatter: function (params, ticket, callback) {
                        return params.seriesName + "<br/>" + params.name + "：" + (params.value * 100).toFixed(0) + "%";
                    }
                }
            },
            {
                name: legendData[1],
                type: 'line',
                symbol: 'rect',
                symbolSize: 10,
                data: rateTwo,
                itemStyle: {
                    color: getRGBString()
                },
                label: {
                    show: true,
                    position: 'bottom',
                    formatter: function (params) {
                        return (params.value * 100).toFixed(0) + "%";
                    }
                },
                tooltip: {
                    formatter: function (params, ticket, callback) {
                        return params.seriesName + "<br/>" + params.name + "：" + (params.value * 100).toFixed(0) + "%";
                    }
                }
            }
        ]
    });
}
initEChart();