使用Nuxt(Vue2)的Apexcharts面积图无法填充区域求助

问题根源 #

你的配置存在两个关键错误，导致面积区域无法填充、fill样式被错误应用到线条：

• id: "basic-bar" 放在了chart对象外部，属于配置层级错误
• 填充配置fill直接放在chartOptions根层级，没有放在面积图专属的plotOptions.area下

修正后的配置代码 #

chartOptions: {
  chart: {
    toolbar: {
      show: true,
      tools: {
        download: true,
        selection: false,
        zoom: true,
        zoomin: false,
        zoomout: false,
        pan: false,
        reset: false,
      },
    },
    id: "basic-bar", // 移至chart对象内部
  },
  colors: ["#FFA07A"],
  plotOptions: { // 新增面积图专属配置区域
    area: {
      fill: {
        type: "gradient",
        gradient: {
          shadeIntensity: 1,
          opacityFrom: 0.7,
          opacityTo: 0.9,
          stops: [0, 100],
        },
      }
    }
  },
  forecastDataPoints: {
    count: 28,
    strokeWidth: 4,
    dashArray: 5,
  },
  title: {
    text: "doesnt matter",
    align: "center",
  },
  grid: {
    borderColor: "#e7e7e7",
    row: {
      colors: ["#f3f3f3", "transparent"], 
      opacity: 0.5,
    },
  },
  xaxis: {
    type: "date",
    tickAmount: 40,
  },
  yaxis: [
    {
      title: {
        text: "Mt CO2eq/we",
      },
      forceNiceScale: true,
    },
  ]
},

额外检查点 #

确保你的series数据格式正确，面积图需要连续的数值点，示例格式：

series: [
  {
    name: "CO2 Emissions",
    data: [
      [1620000000000, 35], // [时间戳, 数值]
      [1620864000000, 42],
      // 更多数据点...
    ]
  }
]

调整后Apexcharts会正确识别面积填充配置，区域将显示你设置的渐变填充效果。

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