eCharts水平填充区

Question

我有一个线型eCharts图，我想填充这条线和y轴之间的区域。默认的区域填充行为是垂直的，图表填充了直线和x轴之间的空间。

​

​

我知道我可以在其他图表库中交换轴，但在eCharts中不像一个选项。

下面是我用来设置图表的选项：

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'
                }
            }
        };

谢谢。

Answer 1

好的，看起来把y轴类型看作一个类别而不是值，去掉y轴的边界就成功了。

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

这些变化后的结果：

​

​