ApexCharts：如何以指定值（非零）为分界设置反向条形图不同颜色

现状与需求 #

• 已查阅ApexCharts官方示例，所有按轴分界设置条形颜色的示例均以0值作为分界点，对应y轴配置如下：

yaxis: {
    min: -100,
    max: 100,
}

• 需求：在y轴范围0-100内，以50值作为轴分界，为不同区间的条形设置不同颜色。当前基础配置：

yaxis: {
    min: 0,
    max: 100,
}

series: [
    {
        name: 'title1',
        data: [80, 20]
    }
],

完整Vue代码 #

new Vue({
    el: '#app',
    components: {
        apexchart: VueApexCharts,
    },
    data: {
        series: [
            {
                name: 'title1',
                data: [80, 20]
            }
        ],
        chartOptions: {
            chart: {
                type: 'bar',
                height: 350
            },
            xaxis: {
                categories: ['South Korea'],
            },
            yaxis: {
                min: 0,
                max: 100,
            },
            plotOptions: {
                bar: {
                    borderRadius: 4,
                    borderRadiusApplication: 'end',
                    horizontal: false,
                }
            },
            dataLabels: {
                enabled: false
            },
        },
    },
})

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