ApexCharts面积图如何根据Y轴值动态更改区域颜色？

问题背景 #

在ApexCharts中，折线图（Line Chart）可以轻松实现线条颜色随Y轴值变化，但切换为面积图（Area Chart）后，区域填充颜色无法直接跟随Y值动态变化，需要自定义实现类似手绘示例中的分段/渐变填充效果。

解决方案 #

ApexCharts本身未提供原生的Y值驱动面积颜色功能，可通过以下两种可靠方式实现：

方法1：分段堆叠面积图（推荐，无DOM操作） #

将原始数据按Y值区间拆分为多个系列（Series），每个系列对应一个颜色区间，开启堆叠模式后，不同区间的面积会自动拼接，实现分段颜色效果。

代码示例（Vue3 + vue3-apexcharts）

<template>
  <apexchart
    type="area"
    :options="chartOptions"
    :series="series"
  />
</template>

<script setup>
import ApexCharts from 'vue3-apexcharts'

// 原始数据（X轴标签+Y轴数值）
const rawData = [
  { x: '1月', y: 20 },
  { x: '2月', y: 50 },
  { x: '3月', y: 80 },
  { x: '4月', y: 40 },
  { x: '5月', y: 60 },
  { x: '6月', y: 90 }
]

// 按Y值区间拆分数据：<30=绿色，30-70=黄色，>70=红色
const splitSeries = () => {
  return [
    {
      name: '低值区',
      data: rawData.map(item => item.y < 30 ? item.y : null),
      color: '#4CAF50'
    },
    {
      name: '中值区',
      data: rawData.map(item => item.y >= 30 && item.y <= 70 ? item.y : null),
      color: '#FFC107'
    },
    {
      name: '高值区',
      data: rawData.map(item => item.y > 70 ? item.y : null),
      color: '#F44336'
    }
  ]
}

const series = splitSeries()

const chartOptions = {
  chart: { type: 'area' },
  dataLabels: { enabled: false },
  stroke: { width: 1, curve: 'smooth' },
  fill: { type: 'solid', opacity: 0.8 },
  yaxis: { min: 0, max: 100 },
  plotOptions: {
    area: {
      stacked: true,
      fillTo: 'origin' // 填充到Y轴原点
    }
  }
}
</script>

优势

• 无需操作DOM，完全基于ApexCharts配置实现，兼容性好
• 支持图表交互（如 tooltip），数据逻辑清晰
• 可灵活调整区间划分和颜色配置

方法2：SVG渐变填充（平滑过渡效果） #

通过自定义SVG线性渐变，将Y轴刻度映射为颜色渐变区间，然后修改面积图的填充属性为该渐变，实现颜色随Y值平滑过渡的效果。

代码示例（Vue3 + vue3-apexcharts）

<template>
  <apexchart
    ref="chartRef"
    type="area"
    :options="chartOptions"
    :series="series"
    @rendered="onChartRendered"
  />
</template>

<script setup>
import { ref } from 'vue'
import ApexCharts from 'vue3-apexcharts'

const chartRef = ref(null)

// 单系列原始数据
const series = [{
  name: '数据',
  data: [20, 50, 80, 40, 60, 90]
}]

const chartOptions = {
  chart: { type: 'area' },
  dataLabels: { enabled: false },
  stroke: { width: 2, curve: 'smooth' },
  yaxis: { min: 0, max: 100 }
}

// 图表渲染完成后添加渐变填充
const onChartRendered = () => {
  const chart = chartRef.value.chart
  const svg = chart.wrapper.querySelector('svg')
  const defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs')

  // 创建从下到上的线性渐变，对应Y轴0-100的颜色区间
  const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient')
  gradient.setAttribute('id', 'yColorGradient')
  gradient.setAttribute('x1', '0%')
  gradient.setAttribute('y1', '100%')
  gradient.setAttribute('x2', '0%')
  gradient.setAttribute('y2', '0%')

  // 定义颜色停止点，与Y值区间对应
  gradient.innerHTML = `
    <stop offset="0%" stop-color="#4CAF50" />
    <stop offset="30%" stop-color="#4CAF50" />
    <stop offset="30%" stop-color="#FFC107" />
    <stop offset="70%" stop-color="#FFC107" />
    <stop offset="70%" stop-color="#F44336" />
    <stop offset="100%" stop-color="#F44336" />
  `

  defs.appendChild(gradient)
  svg.insertBefore(defs, svg.firstChild)

  // 为面积路径设置渐变填充
  const areaPath = svg.querySelector('.apexcharts-area-series path')
  if (areaPath) {
    areaPath.setAttribute('fill', 'url(#yColorGradient)')
  }
}
</script>

注意事项

• 需要在图表rendered事件中执行脚本，确保SVG元素已生成
• 若图表数据更新，需重新执行渐变绑定逻辑
• 兼容性依赖浏览器SVG支持，主流浏览器均无问题

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