网络测速表echarts gauge配置项内容和展示

实现第一个段为256K，第二段为512K，第三段1M，第四段2M，第五段5M，具体图表为例。

      option = {
    series: [{
        name: '网络测试',
        type: 'gauge',
        data: [{
            value: 0
        }],
        startAngle: 210,
        endAngle: -30,
        radius: 150,
        splitNumber: 8,
        min: 0,
        max: 102400,
        axisLine: {
            lineStyle: {
                color: [
                    [0.25, '#fc7e7e'],
                    [1, '#73c6fc']
                ],
                width: 20,
            }
        },
        axisLabel: {
            formatter: function(e) {
                switch (e + "") {
                    case '12800':
                        return '256k'
                    case '25600':
                        return '512k'
                    case '38400':
                        return '1M'
                    case '51200':
                        return '2M'
                    case '64000':
                        return '5M'
                    case '76800':
                        return '10M'
                    case '89600':
                        return '20M'
                    case '102400':
                        return '100M'
                }
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            length: 35,
            lineStyle: {
                color: '#bbb'
            }
        },
        detail: {
            formatter: function(val) {
                return val + '{a|\r\nKB/S}'
            },
            fontSize: 48,
            lineHeight: 48,
            color: '#9a9a9a',
            width: 100,
            offsetCenter: [0, 100],
            // padding: [80, 0, 0, 0],
            rich: {
                'a': {
                    fontSize: 14,
                    color: '#9a9a9a',
                    // padding: [-20, 0, 0, 0],
                    lineHeight: 30
                }
            }
        }
    }, ]
}

function getLineRateY(x, a, b) {
    var aX = a.x,
        aY = a.y,
        bX = b.x,
        bY = b.y;
    return ((x - aX) * (bY - aY)) / (bX - aX) + aY
}
setInterval(function() {
    var val = parseInt((Math.random() * 102400), 0);
    if (val <= 512) {
        val = val * 50
    } else if (val > 512 && val <= 1024) {
        val = getLineRateY(val, {
            x: 512,
            y: 25600
        }, {
            x: 1024,
            y: 38400
        })
    } else if (val > 1024 && val <= 2048) {
        val = getLineRateY(val, {
            x: 1024,
            y: 38400
        }, {
            x: 2048,
            y: 51200
        })
    } else if (val > 2048 && val <= 5120) {
        val = getLineRateY(val, {
            x: 2048,
            y: 51200
        }, {
            x: 5120,
            y: 64000
        })
    } else if (val > 5120 && val <= 10240) {
        val = getLineRateY(val, {
            x: 5120,
            y: 64000
        }, {
            x: 10240,
            y: 76800
        })
    } else if (val > 10240 && val <= 20480) {
        val = getLineRateY(val, {
            x: 10240,
            y: 76800
        }, {
            x: 20480,
            y: 89600
        })
    } else if (val > 20480 && val <= 102400) {
        val = getLineRateY(val, {
            x: 20480,
            y: 89600
        }, {
            x: 102400,
            y: 102400
        })
    }
    val = Math.floor(val)
    option.series[0].data[0].value = val;
    myChart.setOption(option, true);
}, 1000);