如何通过回调动态修改股票图表Y轴标题？

要实现滚动时基于当前Y轴刻度动态更新标题，核心是找对能获取最新刻度的时机，并避免触发不必要的重绘循环。以下是针对主流图表库的可行方案：

针对Highcharts（股票场景常用） #

方案1：利用Y轴afterSetExtremes事件（滚动/缩放时触发） #

这个事件会在Y轴范围变化（比如滚动、缩放图表）时触发，能直接拿到最新的极值，适合用来计算单位：

Highcharts.stockChart('container', {
    yAxis: {
        title: {
            text: '价格' // 初始标题
        },
        afterSetExtremes: function(e) {
            // 根据当前刻度极值判断单位
            const maxVal = e.max;
            let unit = '';
            
            if (maxVal >= 100000000) {
                unit = ' (亿元)';
            } else if (maxVal >= 10000) {
                unit = ' (万元)';
            } else {
                unit = ' (元)';
            }
            
            // 更新标题，第二个参数设为false避免重复重绘
            this.update({
                title: {
                    text: '价格' + unit
                }
            }, false);
        }
    },
    series: [{
        data: [/* 你的股票数据集合 */]
    }]
});

方案2：利用render事件（每次重绘时更新） #

如果之前用render事件没成功，大概率是直接访问了旧的ticks缓存或触发了重绘循环。可以加个判断避免重复更新：

Highcharts.stockChart('container', {
    yAxis: {
        title: {
            text: '价格'
        },
        events: {
            render: function() {
                // 获取当前可见的刻度数值
                const tickValues = Object.keys(this.ticks).map(key => parseFloat(key));
                if (tickValues.length === 0) return;
                
                const maxTick = Math.max(...tickValues);
                let unit = '';
                
                if (maxTick >= 100000000) {
                    unit = ' (亿元)';
                } else if (maxTick >= 10000) {
                    unit = ' (万元)';
                } else {
                    unit = ' (元)';
                }
                
                // 仅当标题不一致时更新，避免循环重绘
                if (this.title.text !== '价格' + unit) {
                    this.title.update({
                        text: '价格' + unit
                    });
                }
            }
        }
    },
    series: [{
        data: [/* 你的股票数据集合 */]
    }]
});

针对ECharts #

如果用的是ECharts，可监听dataZoom事件（滚动时触发）来更新Y轴标题：

const myChart = echarts.init(document.getElementById('container'));

myChart.setOption({
    yAxis: {
        name: '价格'
    },
    dataZoom: [{
        type: 'inside', // 内部滚动
        yAxisIndex: 0
    }],
    series: [{
        data: [/* 你的股票数据集合 */]
    }]
});

// 监听滚动事件
myChart.on('dataZoom', function() {
    const yAxisModel = myChart.getModel().getComponent('yAxis');
    const ticks = yAxisModel.axis.ticks;
    if (!ticks || ticks.length === 0) return;
    
    const maxTick = Math.max(...ticks.map(t => t.value));
    let unit = '';
    
    if (maxTick >= 100000000) {
        unit = ' (亿元)';
    } else if (maxTick >= 10000) {
        unit = ' (万元)';
    } else {
        unit = ' (元)';
    }
    
    myChart.setOption({
        yAxis: {
            name: '价格' + unit
        }
    });
});

内容的提问来源于stack exchange，提问作者Ivan Kondratev