ECharts带对数Y轴双系列折线图出现截断问题求助

问题现象 #

制作Y轴采用对数刻度的双系列折线图时，其中一个系列（蓝色withImages）包含大量0值，导致Y轴刻度被限定在0-10，无法完整显示另一个系列（红色total）的高值（最高达907）。关闭蓝色系列的图例后，Y轴刻度才会自动调整为0-1000，完整显示红色系列。

问题原因 #

对数坐标系中，0是没有数学定义的（log₁₀0无意义）。ECharts在处理包含0的数据集时，会错误地忽略另一系列的高值，仅基于能正常计算的非0小值来生成Y轴刻度范围，从而导致高值系列被截断。

解决方案 #

方案1：替换数据中的0为极小值 #

将蓝色系列数据中的所有0替换为一个接近0的极小值（比如0.1），这样既不影响视觉效果，又能让ECharts正确计算包含高值的Y轴范围。

修改后的完整代码：

option = {
    title: {
        text: `occurence of 'formica' in text by year`,
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        formatter: '{b}<hr>{a0}: {c0}<br/>{a1}: {c1}'
    },
    legend: {
        left: 'left',
        orient: 'vertical',
        borderWidth: 1,
        borderRadius: 5,
        borderColor: '#444'
    },
    xAxis: {
        type: 'category',
        name: 'x',
        splitLine: { show: false },
        data: [
            1841, 1846, 1850, 1851, 1853,
            1855, 1857, 1859, 1860, 1861,
            1862, 1863, 1866, 1877, 1884,
            1886, 1887, 1890, 1893, 1894,
            1895, 1896, 1902, 1904, 1905,
            1910, 1912, 1913, 1914, 1915,
            1920, 1922, 1924, 1926, 1928,
            1932, 1949, 1950, 1953, 1955,
            1956, 1958, 1959, 1960, 1975,
            1979, 1990, 1992, 1993, 1997,
            2000, 2001, 2003, 2004, 2005,
            2006, 2007, 2008, 2009, 2010,
            2011, 2012, 2013, 2014, 2015,
            2016, 2017, 2018, 2019, 2020,
            2021, 2022, 2023
        ]
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'log',
        minorSplitLine: {
            show: true
        }
    },
    series: [
        {
            name: 'withImages',
            type: 'line',
            data: [
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 0.1, 0.1, 0.1, 0.1,
                  0.1, 5,   0.1, 0.1, 1,
                225, 0.1, 139, 0.1, 0.1,
                 12, 17,  16, 60,  5,
                 14, 25, 129, 23, 73,
                 36, 74,  49, 96, 27,
                386, 50,   0.1
            ],
            color: '#00f',
            lineStyle: {
                color: '#00f',
                width: 1
            },
            clip: true
        },
        {
            name: 'total',
            type: 'line',
            data: [
                  3,   2,   2,  26,   5, 
                  7,  27,  30,   4,   9, 
                 18,   4,  12,   1,   2, 
                 12,   2,   5,   4,   9, 
                  3,   1,   3,  14,  10, 
                  1,   1,   3,   7,   5, 
                  1,   8,   1,   5,   5, 
                  2,   3,   1,   2,   3, 
                  1,   2,   1,   2,   2, 
                136,  27,   3,   1,   1, 
                251,  14, 141,   2,  62, 
                 16,  79,  42, 141, 111, 
                 62, 100, 137,  54, 139, 
                166,  87,  79, 142,  84, 
                907,  79,   3
            ],
            color: '#f00',
            lineStyle: {
                color: '#f00',
                width: 1
            },
            clip: true
        }
    ]
};

const myChart = echarts.init(document.getElementById('graphdiv'));
myChart.setOption(option);

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<div id="graphdiv" style="width: 100%;height:200px;"></div>

方案2：手动指定Y轴范围 #

直接在Y轴配置中设置min和max，强制轴范围覆盖高值。注意对数轴不能设置min: 0，需要用极小值替代：

yAxis: {
    type: 'log',
    minorSplitLine: {
        show: true
    },
    min: 0.1, // 替代0的极小值
    max: 1000 // 覆盖红色系列的最高值907
}

效果验证 #

两种方案都能让Y轴刻度正确显示到1000，两个系列的数据都能完整展示，无需关闭图例。

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