当值小于零时如何使用Apexcharts设置颜色区域

Question

这是我的脚本选项，使用 apexcharts 图表

还有我的剧本

                var options = {
                    series: [{
                        name: 'Profit',
                        data: [{"x":"2021-08-29","y":0.23},{"x":"2021-08-30","y":-5.29},{"x":"2021-08-31","y":-0.02},{"x":"2021-09-01","y":5.38},...
                    }],
                    chart: {
                        type: 'area',
                        height: 350,
                        zoom: {
                            enabled: false
                        },
                        toolbar: {
                            show: false
                        }
                    },
                    stroke: {
                        show: true,
                        curve: 'smooth',
                        lineCap: 'butt',
                        width: 2
                    },
                    fill: {
                        type: 'gradient',
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.45,
                            opacityTo: 0.9
                        },
                    },
                    plotOptions: {
                        area: {
                            colors: {
                                ranges: [
                                    {
                                        from: -100,
                                        to: 0,
                                        color: "#e85347" // Red color
                                    },
                                    {
                                        from: 0,
                                        to: 100,
                                        color: "#1ee0ac" // Green color
                                    }
                                ]
                            },
                            columnWidth: "80%"
                        }
                    },
                    yaxis: {
                        labels: {
                            offsetX: 0,
                        },
                        axisBorder: {
                            show: false,
                        },
                        axisTicks: {
                            show: false
                        }
                    },
                    xaxis: {
                        type: 'datetime',
                        tickAmount: 8,
                        labels: {
                            rotate: -45,
                            rotateAlways: true,
                            formatter: function(val, timestamp) {
                                return moment(new Date(timestamp)).format("DD MMM")
                            }
                        }
                    },
                    tooltip: {
                        shared: true
                    },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'right',
                        offsetX: -10
                    }
                };

                var chart = new ApexCharts(document.querySelector("#portfolio_line"), options);
                chart.render();

当值小于零时如何配置，因此条形颜色将为红色，大于0将为绿色

Answer 1

这是我使用垂直渐变的方法。其中百分比是范围面积图的百分比。

fill:{
  opacity:[0.8, 1, 1],
  type: ["fill", 'fill', 'fill'],
  gradient: {
    type:'vertical',
    opacityFrom: 0.6,
    opacityTo: 0.6,
    gradientToColors:['#4d2e54'],
    stops: [0,0, percent,percent,  100]
  }
},