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);