ApexCharts范围面积图定制：双折线异色，填充区同首线色

要实现你想要的效果，核心是将填充配置从全局options.fill移至每个series的单独配置中，并为第二个series指定与第一条折线相同的填充颜色。以下是修改后的完整配置代码：

const chartState = {
  series: [
    {
      name: "San Diego",
      data: [2.5, 2.8, 3.0, 2.5, 2.8, 3.0],
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.7,
          opacityTo: 0.9,
          stops: [0, 100],
        }
      }
    },
    {
      name: "National",
      data: [2, 1.2, 2.8, 2, 1.2, 2.8],
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.7,
          opacityTo: 0.9,
          stops: [0, 100],
        },
        colors: ["#FFC700"] // 指定填充颜色为第一条折线的颜色
      }
    },
  ],
  options: {
    chart: {
      height: 350,
      type: "area",
    },
    colors: ["#FFC700", "#7000FF"], // 保持两条折线的不同颜色
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    // 移除全局的fill配置，改为在series中单独设置
    xaxis: {
      type: "datetime",
      categories: [
        "2022-08-30T00:00:00.000Z",
        "2022-09-30T00:00:00.000Z",
        "2022-10-30T00:00:00.000Z",
        "2022-11-30T00:00:00.000Z",
        "2022-12-30T00:00:00.000Z",
        "2023-01-30T00:00:00.000Z",
      ],
    },
    yaxis: {
      min: 0.5,
      max: 3.0,
    },
    tooltip: {
      x: {
        format: "dd/MM/yy",
      },
    },
    legend: {
      position: "top",
      horizontalAlign: "right",
    },
    annotations: {
      xaxis: [
        {
          x: "2022-10-30T00:00:00.000Z",
          fillColor: "#B3F7CA",
          opacity: 0.4,
        },
        {
          x: "2022-11-30T00:00:00.000Z",
          fillColor: "#B3F7CA",
          opacity: 0.4,
        },
      ],
    },
  },
};

关键修改说明 #

• 移除全局fill配置：删除原来的全局options.fill，改为在每个series内部定义填充样式，实现填充效果的单独控制。
• 指定第二个series的填充颜色：在第二个series的fill.colors中设置与第一条折线一致的#FFC700，同时通过全局colors配置保留两条折线的差异化颜色，达成"折线颜色不同、填充区域与第一条一致"的需求。
• 保留渐变效果：两个series的填充都沿用原有的渐变参数，确保视觉风格统一。

效果对比 #

当前效果：

目标效果（修改后可实现）：

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