eCharts 水平填充区域

Question

I have a line type eCharts graph and I want to fill the area between the line and the y axis . The default area filling behaviour happens vertically, the chart fills out the space between the line and the x axis .

I know I can swap axes in other chart libraries but doesn't look like an option here in eCharts .

These are the options I'm using to set up the chart:

const options = {
            tooltip: {
                show: false
            },
            grid: {
                show: true,
                top: 0,
                bottom: 40,
                left: 50,
                right: 10,
            },
            xAxis: {
                id: 'x',
                type: 'value',
                min: 0,
                max: 4,
            },
            yAxis: {
                id: 'y',
                type: 'value',
                inverse: true,
                min: range?.min,
                max: range?.max,
                axisLine: {
                    show: true
                },
                splitLine: {
                    show: true
                },
                axisTick: {
                    show: true
                }
            },
            series: {
                type: 'line',
                xAxisId: 'x',
                yAxisId: 'y',
                symbol: 'none',
                smooth: true,
                connectNulls: false,
                // 2d array like [[1,1000], [3, 1250], ...]
                data: filteredData.data,
                lineStyle: {
                    color: '#f00',
                },
                areaStyle: {
                    color: '#f00',
                    origin: 'auto'
                }
            }
        };

Thanks.

Answer 1

Ok, looks like treating the y axis type as a category instead of value and removing the y axis boundaries did the trick.

yAxis: {
         id: 'y',
         type: 'category', // category and not value
         // y axis boundaries removed
         ...

Outcome after these changes: