How to create dynamic Y-axis inteval using Echarts

Question

Is it possible to create a dynamic Y-axis interval using echarts? I want to achieve the Y-axis interval in the table below:

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

Desired Output:

Example FIDDLE

Answer 1

If you are trying to show background color to differentiate the points based on category, then using mark area in echarts will be a better option.

For example refer the chart below,

Chart Option

    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'
                    }]
                ]
            }
        }
    ]
};