如何将系列与 ApexCharts 中的特定 Y 轴关联，同时保留自定义系列名称？

Question

我正在 Vue.js 应用程序中使用 ApexCharts，我需要根据系列名称将系列动态链接到特定的 y 轴。但是，我遇到了一个问题，即系列的命名必须与 y 轴配置的 seriesName 属性完全相同，以确保正确的关联。此要求与我在图表图例和工具提示中显示更多描述性系列名称的需要相冲突。

这是我当前设置的简化版本：

Vue 组件：

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
    components: {
        apexchart: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                yaxis: [
                    {
                        seriesName: 'Température',
                        // Axis configuration...
                    },
                    {
                        seriesName: 'Activité',
                        // Axis configuration...
                    }
                ],
                // Other chart options...
            },
            datasets: [{
                data : [],
                name : ''  // Needs to match 'seriesName' of y-axis
            }],
        };
    },
async mounted() {
            try {
                const transformedDataArray = await this.getAllDataHistorical();

                if (this.$refs.lineChart1) {
                    this.$refs.lineChart1.updateSeries(transformedDataArray);
                    this.$refs.areaChart1.updateSeries(transformedDataArray);
                } else {
                    console.error("Chart components are not ready.");
                }
            } catch (error) {
                console.error("Failed to load and display data:", error);
            }
        },
    methods: {
        transformData(rawData, key, tagName, prefix, color, yAxisName) {
            return {
                name: yAxisName,  // Used for axis association
                displayName: prefix + tagName,  // Real name to display
                data: rawData.map(item => [new Date(item.received_on).getTime(), item[key]]),
                color: color
            };
        },
        // Additional methods...
    }
}
</script>

出现这个问题是因为系列数据的 name 属性必须与 y 轴配置中的 seriesName 匹配才能正确的 y 轴关联，从而阻止我使用更具描述性的名称。如何在图例和工具提示中维护描述性名称，同时确保系列与其各自的轴正确关联？

这是我的名字在图例中的屏幕..虽然我希望它是属性displayName..

所以我的问题是：是否有一种更有效的方法来管理 ApexCharts 中的系列名称和轴关联，而不影响 UI 中描述性名称的功能？

Answer 1

尝试更改系列对象格式，

series: [
            {
                name: 'Session Duration',
                data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
            },
            {
                name: 'Page Views',
                data: [35, 41, 62, 42, 13, 18, 29, 37, 36, 51, 32, 35]
            },
            {
                name: 'Total Visits',
                data: [87, 57, 74, 99, 75, 38, 62, 47, 82, 56, 45, 47]
            }
        ],