如何在Vue的ApexCharts中关联系列与指定Y轴并保留自定义系列名

核心思路是利用ApexCharts的自定义格式化能力，让系列name继续承担Y轴关联的作用，同时通过配置覆盖图例和提示框的显示文本，改用你自定义的displayName。

具体实现步骤 #

• 保留关联逻辑：系列的name字段仍与Y轴配置中的seriesName保持一致，确保轴关联正常工作
• 覆盖图例显示：在chartOptions.legend中添加formatter函数，根据系列索引获取对应的displayName
• 自定义提示框内容：在chartOptions.tooltip中配置custom函数，构建包含displayName的提示框

修改后的完整代码示例 #

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
    components: {
        apexchart: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                yaxis: [
                    {
                        seriesName: 'Température',
                        // 你的Y轴配置...
                    },
                    {
                        seriesName: 'Activité',
                        // 你的Y轴配置...
                    }
                ],
                legend: {
                    // 自定义图例文本
                    formatter: (seriesName, seriesIndex) => {
                        return this.datasets[seriesIndex]?.displayName || seriesName;
                    }
                },
                tooltip: {
                    // 自定义提示框内容
                    custom: ({ series, seriesIndex, dataPointIndex, w }) => {
                        const targetSeries = this.datasets[seriesIndex];
                        // 按需调整提示框HTML结构和样式
                        return `
                            <div class="apexcharts-tooltip">
                                <div class="tooltip-time">${new Date(w.globals.labels[dataPointIndex]).toLocaleString()}</div>
                                <div class="tooltip-item" style="color: ${targetSeries.color}">
                                    ${targetSeries.displayName}: ${series[dataPointIndex]}
                                </div>
                            </div>
                        `;
                    }
                },
                // 其他图表配置...
            },
            datasets: [{
                data : [],
                name : '',  // 保持与Y轴seriesName匹配
                displayName: '' // 用于UI显示的自定义名称
            }],
        };
    },
    async mounted() {
        try {
            const transformedDataArray = await this.getAllDataHistorical();
            // 更新datasets，确保图例和提示框能获取到最新自定义名称
            this.datasets = transformedDataArray;
            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,  // 用于Y轴关联
                displayName: prefix + tagName,  // UI显示的名称
                data: rawData.map(item => [new Date(item.received_on).getTime(), item[key]]),
                color: color
            };
        },
        // 其他方法...
    }
}
</script>

关键说明 #

• 图例formatter函数通过seriesIndex从this.datasets读取自定义名称，无匹配时 fallback 到原始系列名
• 提示框custom函数结合全局对象w和本地datasets构建自定义内容，可根据需求调整HTML结构和样式
• 挂载时同步更新this.datasets，确保UI组件能获取到最新的自定义名称

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