面积图的 Apexcharts 渐变配置

Question

我正在尝试创建一个如下所示的图表： https://i.stack.imgur.com/9KpYO.png

但我得到了这个： https://i.stack.imgur.com/oA7Vm.png

这是我的配置：

{
  chartOptions: {
    chart: {
      type: 'area',
      height: 200,
      toolbar: { show: false },
      zoom: { enabled: false },
    },
    colors: ["#01c40e"],
    grid: { show: false},
    dataLabels: { enabled: false },
    legend: { show: false },
    stroke: {
      curve: 'straight',
      width: 2,
    },
    xaxis: {
      type: 'numeric',
      labels: {show: false},
      axisBorder: {show:false},
      axisTicks: {show:false},
    },
    yaxis: {
      type: 'numeric',
      labels: {show: false},
      axisBorder: {show:false},
      axisTicks: {show:false},
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "vertical",
        shadeIntensity: 0,
        opacityFrom: 0.2,
        opacityTo: 0.7,
        stops: [0, 50, 80, 100]
      }
    },
    tooltip: { enabled: false}
  },
  series: [{
    name: 'Series A',
    type: "area", // this is not in documentation but without it i get line, not area
    data: [4852, 4840, 4845, 4859, 4862, 4852]
  }]
}

主要是关于填充配置，它过多地填充该区域，而不是填充在顶部最高，而是在底部，这使得渐变与我需要的相反。

Answer 1

尝试交换 opacityFrom 和 opacityTo 的值，
并删除 stops 的选项

  fill: {
    type: "gradient",
    gradient: {
      shade: "light",
      type: "vertical",
      shadeIntensity: 0,
      opacityFrom: 0.7,
      opacityTo: 0.2
    }
  },

请参阅以下工作 sn-p...

$(document).ready(function() {
  var chart = new ApexCharts(
    document.getElementById('chart'),
    {
      chart: {
        type: 'area',
        height: 200,
        toolbar: { show: false },
        zoom: { enabled: false },
      },
      colors: ["#01c40e"],
      grid: { show: false},
      dataLabels: { enabled: false },
      legend: { show: false },
      stroke: {
        curve: 'straight',
        width: 2,
      },
      xaxis: {
        type: 'numeric',
        labels: {show: false},
        axisBorder: {show:false},
        axisTicks: {show:false},
      },
      yaxis: {
        type: 'numeric',
        labels: {show: false},
        axisBorder: {show:false},
        axisTicks: {show:false},
      },
      fill: {
        type: "gradient",
        gradient: {
          shade: "light",
          type: "vertical",
          shadeIntensity: 0,
          opacityFrom: 0.7,
          opacityTo: 0.2
        }
      },
      tooltip: { enabled: false},
      series: [{
        name: 'Series A',
        type: "area", // this is not in documentation but without it i get line, not area
        data: [4852, 4840, 4845, 4859, 4862, 4852]
      }]
    }
  );

  chart.render();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>