如何去除彩虹图上彩虹和轴之间的彩色区域

Question

我正在尝试用 html 和 Javascript 创建比特币彩虹价格图表。我能够创建图表，但彩虹下方有一个填充区域（彩虹和轴之间）。

以下是我的图表功能：

        function createChart(data) {
            const dates = data.map(d => d.date);
            const prices = data.map(d => d.price);

            const rainbowLevels = [
                { color: '#C00200', key: 'maxBubble', label: 'Maximum bubble territory' },
                { color: '#D64018', key: 'sell', label: 'Sell. Seriously, sell!' },
                { color: '#ED7D31', key: 'fomo', label: 'FOMO intensifies' },
                { color: '#F6B45A', key: 'bubble', label: 'Is this a bubble?' },
                { color: '#FEEB84', key: 'hold', label: 'HOLD' },
                { color: '#B1D580', key: 'stillCheap', label: 'Still cheap' },
                { color: '#63BE7B', key: 'accumulate', label: 'Accumulate' },
                { color: '#54989F', key: 'buy', label: 'BUY!' },
                { color: '#4A7DD7', key: 'fireSale', label: 'Fire sale!' }
            ];

            const series = rainbowLevels.map(level => ({
                name: level.label,
                type: 'line',
                data: data.map(d => [d.date, d[level.key]]),
                areaStyle: {
                    color: level.color,
                    opacity: 1,
                },
                lineStyle: {
                    width: 0
                },
                showSymbol: false
            }));

            series.push({
                name: 'BTC Price',
                type: 'line',
                data: prices.map((price, index) => [dates[index], price]),
                lineStyle: {
                    color: 'black',
                    width: 1
                },
                showSymbol: false,
                smooth: true,
                yAxisIndex: 1
            });

            const chart = echarts.init(document.getElementById('chart'));

            const option = {
                title: {
                    text: '',
                    left: 'center'
                },
                
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        let tooltip = `<div>${params[0].axisValueLabel}</div>`;
                        params.forEach(param => {
                            tooltip += `
                                <div style="display: flex; align-items: center;">
                                    <span style="background-color: ${param.color}; width: 8px; height: 8px; display: inline-block; margin-right: 4px;"></span>
                                    ${param.seriesName}: ${param.value[1]}
                                </div>`;
                        });
                        return tooltip;
                    }
                },
                legend: {
                    data: ['BTC Price', ...rainbowLevels.map(level => level.label)],
                    top: 20,
                    orient: 'horizontal'
                },
                grid: {
                    top: 80,
                    left: 60,
                    right: 40,
                    bottom: 60,
                    containLabel: true
                },
                xAxis: {
                    type: 'time',
                    name: 'Date'
                },
                yAxis: [
                    {
                        type: 'log',
                        name: 'Price (log scale)',
                        min: 0.01,
                        max: 1000000,
                        splitLine: { show: false }
                    },
                    {
                        type: 'log',
                        name: '',
                        min: 0.01,
                        max: 1000000,
                        axisLabel: { show: false },
                        axisLine: { show: false },
                        splitLine: { show: false },
                        axisTick: { show: false }
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside',
                        xAxisIndex: [0]
                    },
                    {
                        type: 'slider',
                        xAxisIndex: [0],
                        start: 0,
                        end: 100
                    }
                ],
                series: series
            };

            chart.setOption(option);
            window.addEventListener('resize', () => {
                chart.resize();
            });
        }

这是它在浏览器中的样子。正如您所看到的，有一个蓝色的填充区域。此外，当我将鼠标悬停在图例元素之一（顶部）上时，填充区域会改变颜色。例如，将鼠标悬停在“出售”上。说真的，卖吧！填充区域颜色变为橙色等。

我尝试更改以下值。我将颜色更改为#ffffff，但它也会使彩虹消失或使其变白。

              areaStyle: {
                    color: level.color,
                    opacity: 1,
                   },

如何去掉彩虹下的填充区域，同时保留彩虹曲线的颜色？

Answer 1

替代解决方案是

堆积面积图。但您需要构建自定义工具提示。