如何使用 Echarts 创建动态 Y 轴间隔

Question

是否可以使用 echarts 创建动态 Y 轴区间？我想实现下表中的Y轴间隔：

+---------------+--------------+
| Description   | Percentage   |
+---------------+--------------+
| Exceptional.. |  98% above   |
| Exceed Exp..  |  96-97.9%    |
| Normal        |  90-95.9%    |
| Needs Improv..|  80-89.9%    |
| Failed        |  79.9% below |
+---------------+--------------+

期望的输出：

示例 FIDDLE

Answer 1

如果您尝试显示背景颜色以根据类别区分点，那么在 echarts 中使用标记区域将是一个更好的选择。

例如参考下面的图表，

图表选项

    option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        type: 'value',
        min: 0,
        max: 100
    },
    series: [
        {
            name: 'Result',
            type: 'line',
            lineStyle: {
                color: '#000',
            },
            smooth: true,
            data: [75, 90, 84, 100, 85, 70, 80, 90, 0, 0, 0, 95],
            markArea: {
                silent: true,
                label: {
                    color: '#000',
                    position: 'inside'
                },
                data: [ [{
                        name: 'Failed The Expectation',
                        yAxis: '0',
                        itemStyle: { color: '#c80500' }
                    }, {
                        yAxis: '80'
                    }], 
                    [{
                        name: 'Needs Improvement',
                        yAxis: '80',
                        itemStyle: { color: '#f00000' }
                    }, {
                        yAxis: '90'
                    }], 
                    [{
                        name: 'Normal/Acceptable',
                        yAxis: '90',
                        itemStyle: { color: '#0072b9' }
                    }, {
                        yAxis: '96'
                    }],
                    [{
                        name: 'Exceed Expectation/Satisfactory',
                        yAxis: '96',
                        itemStyle: { color: '#00fff5' }
                    }, {
                        yAxis: '98'
                    }],
                     [{
                        name: 'Exceptional Performance/Target',
                        yAxis: '98',
                        itemStyle: { color: '#ff29cb' }
                    }, {
                        yAxis: '100'
                    }]
                ]
            }
        }
    ]
};