在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时，若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预，可以通过以下步骤实现：

在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时，若希望 Y 轴颜色自动匹配折线颜色且无需手动干预，可以通过以下步骤实现：

核心思路

不定义颜色数组：让 ECharts 自动使用默认主题颜色。
动态获取自动生成的颜色 ：通过 getOption() 在图表初始化后获取实际应用到折线的颜色。
同步颜色到 Y 轴：将获取到的颜色动态设置到对应的 Y 轴。

实现代码

vue 复制代码

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const chart = ref(null);

    onMounted(() => {
      const myChart = echarts.init(chart.value);

      // 初始配置（不设置颜色和Y轴颜色）
      const initialOption = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: [
          { type: 'value', name: 'Y轴1' },
          { type: 'value', name: 'Y轴2' },
          { type: 'value', name: 'Y轴3' }
        ],
        series: [
          {
            name: '折线1',
            type: 'line',
            data: [120, 200, 150, 80, 70, 110, 130],
            yAxisIndex: 0
          },
          {
            name: '折线2',
            type: 'line',
            data: [80, 150, 100, 200, 90, 160, 140],
            yAxisIndex: 1
          },
          {
            name: '折线3',
            type: 'line',
            data: [200, 120, 90, 150, 130, 80, 110],
            yAxisIndex: 2
          }
        ]
      };

      // 第一次渲染（不带Y轴颜色）
      myChart.setOption(initialOption);

      // 获取实际应用的颜色（自动生成的默认颜色）
      const appliedColors = myChart.getOption().color; // myChart 当前图表的名称

      // 更新Y轴颜色配置
      const updatedYAxis = initialOption.yAxis.map((axis, index) => ({  //  initialOption 当前的echart的option对象名称
        ...axis,
        axisLine: {
          lineStyle: {
            color: appliedColors[index] // 按索引同步颜色
          }
        }
      }));

      // 合并更新后的配置
      myChart.setOption({
        yAxis: updatedYAxis
      });
    });

    return { chart };
  }
};
</script>

关键点解释

自动颜色分配：
- 不手动设置 color 数组，让 ECharts 使用默认主题颜色。
- 默认颜色通常是 ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', ...]。
动态获取颜色：
- 通过 myChart.getOption().color 获取实际应用到折线的颜色数组。
- 此数组的顺序与 series 中定义的顺序一致。
同步到 Y 轴：
- 遍历 yAxis 配置，按索引将颜色设置到 axisLine.lineStyle.color。
- 使用 myChart.setOption() 的合并特性更新配置，避免重新渲染整个图表。

效果

折线和对应的 Y 轴会使用相同的颜色。
完全依赖 ECharts 的默认配色逻辑，无需手动定义颜色。

扩展：动态响应数据变化

如果图表数据动态变化（如新增折线），可以在数据更新后重新执行颜色同步逻辑：

javascript 复制代码

// 假设数据更新后调用此函数
function updateChart(newSeries) {
  myChart.setOption({ series: newSeries });
  const appliedColors = myChart.getOption().color;
  const updatedYAxis = newSeries.map((_, index) => ({
    axisLine: { lineStyle: { color: appliedColors[index] } }
  }));
  myChart.setOption({ yAxis: updatedYAxis });
}

总结

通过 动态获取自动生成的颜色 并同步到 Y 轴，实现了颜色一致性。这种方法无需手动干预，完全依赖 ECharts 的默认机制，适合需要灵活配色的场景。

有局限性：echart版本5的只能自动生成9个颜色，超过九个就需要自己写颜色了，或者写随机生成颜色的方法