ApexCharts配置问题：合并Price1与Price2的Y轴刻度

要实现将Price1和Price2合并为一个自适应Y轴、BSR单独使用右侧Y轴的效果，只需调整Y轴配置和系列的Y轴绑定即可，具体修改如下：

核心修改点 #

• 将yaxis数组从3个缩减为2个：一个用于BSR（右侧），一个用于两个价格系列（左侧）
• 给每个series添加yaxisIndex属性，明确指定该系列绑定到哪个Y轴
• 移除重复的价格Y轴配置，只保留一个自适应的价格轴

修改后的完整代码 #

<!DOCTYPE html>   
<body>
    <div class="graph-div">
        <div id="chart"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        var options = {
            series:[{
                name:"BSR",
                data: [8097, 8097, 8032, 8767, 8767, 9086, 7965],
                yaxisIndex: 0 // 指定BSR使用第1个Y轴（索引0）
                }, {
                name:"Price 1",
                data: [44.99, 44.99, 38.99, 38.99, 38.99, 0, 0],
                yaxisIndex: 1 // 指定Price1使用第2个Y轴（索引1）
                }, {
                name:"Price 2",
                data: [44.99, 74.35, 38.99, 38.99, 74.35, 74.35, 74.35],
                yaxisIndex: 1 // 指定Price2使用第2个Y轴（索引1）
                }
            ],
            chart: {
                height: "100%",
                type: "area",
                offsetY: 10,
                toolbar: {
                    show: false
                }
            },
            theme: {
                mode: 'dark',
            },
            colors:["#98BB93", "#F2A93B", "#EA33B0"],
            dataLabels: {
                enabled: false,
            },
            stroke: {
                width: 1.5,
                curve: "stepline",
            },
            fill: {
                type:"gradient",
                gradient: {
                    opacityFrom: .3, opacityTo: .05
                }
            },
            grid: {
                borderColor: 'rgba(234,243,253,.12)',
            },
            legend: {
                position: "top",
                horizontalAlign: "center",
                offsetY: 8,
            },
            xaxis: {
                axisBorder: {
                color: '#EAF3FD' 
                 },
                type: 'category',
                categories: ['2023-12-08 20:02:00', '2023-12-08 22:12:00', '2023-12-09 01:14:00', '2023-12-09 02:16:00', '2023-12-09 05:14:00', '2023-12-09 06:44:00', '2023-12-09 12:44:00'],
                labels: {
                    show: false,
                }
                
            },
            yaxis: [
                {
                    opposite: true, // BSR的Y轴显示在右侧
                    labels: {
                        formatter: function (value) {
                            return value.toFixed(0);
                        }
                    },
                }, 
                {
                    // 两个价格系列共用的Y轴，自动根据数据自适应范围
                    labels: {
                        formatter: function (value) {
                            return "€ " + value.toFixed(2);
                        }
                    },
                }
            ],
        };
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>
</body>
</html>

效果说明 #

• BSR系列绑定到右侧Y轴，保持原有大数值的显示比例
• Price1和Price2共用左侧同一个Y轴，ApexCharts会自动计算两个系列的数值范围，生成自适应的刻度
• 左侧不再显示重复的价格轴，达到目标图的效果

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