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

问题描述

是否可以使用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

解决方法

如果您试图显示背景颜色以根据类别区分点，那么在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,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'
                    }]
                ]
            }
        }
    ]
};