动态数据 + 时间坐标轴echarts time配置项内容和展示

      var data ={
    first:[],
    second:[]
};

var now = new Date();
var date,num;
for(var i = 0,leni=750;i<leni;i++){
    date = now.getTime()+i*1000*60*60;
    num = Math.round(153*Math.random());
    data.first.push({
        name:date,
        value: [date,num]
    });
    num = Math.round(153*Math.random());
    data.second.push({
        name:date,
        value: [date,num]
    });
}

var timeFormat = function(num) {
    if (num < 10) {
        return '0' + num;
    } else {
        return num;
    }
}
var gauge_value = data.first[data.first.length-1].value[1];
var gauge_value2 = data.second[data.second.length-1].value[1];
var gauge_name = '温度';
var min = 0;
var max = 100;
var unit = '℃';

function getcolor(value) {
    let color;
    let percent = value / max;
    if (percent < 0.2) {
        color = '#9CD6CE';
    } else if (percent < 0.4) {
        color = '#7CBB55';
    } else if (percent < 0.6) {
        color = '#DDBD4D';
    } else if (percent < 0.8) {
        color = '#E98E2C';
    } else {
        color = '#E43F3D';
    }
    return [percent, color];
}
var gaugeColor = getcolor(gauge_value);
var gaugeColor2 = getcolor(gauge_value2);
var lineColor = '#9CD6CE';
var color = ['#e29304','#75b228'];
var seriesName = ['装药机1','装药机2'];

option = {
    title: {
        text: '动态数据 + 时间坐标轴',
        show: false
    },
    grid: {
        right: 20,
        left: 20,
        top: 200
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, '5%'],
        splitLine: {
            show: false
        }
    },
    color:color,
    series: [
        {
            name: seriesName[0],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data.first,
            lineStyle: {
                normal: {
                    width: 2
                }
            }
        },
        {
            name: seriesName[1],
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data.second,
            lineStyle: {
                normal: {
                    width: 2
                }
            }
        },
        {
            name: gauge_name,
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: 120,
            splitNumber: 1,
            center: ['35%', '45%'], // 默认全局居中  
            min: min,
            max: max,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 45,
                    shadowBlur: 0,
                    color: [
                        [1, '#ccc']
                    ]
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                length: 20,

            },
            axisLabel: {
                show: true,
                padding: [20, 0, 0, 0],
                fontSize: 12,
                distance: -2
            },
            pointer: {
                show: false
            },
            detail: {
                offsetCenter: [0, -15],
                textStyle: {
                    fontSize: 40,
                    fontWeight: '',
                    color: '#ccc'
                },
                formatter: function(value) {
                    return value + unit;
                }

            },
            itemStyle: {
                normal: {
                    color: "#323232",
                }
            },
            data: [{
                name: "",
                value: Math.floor(gauge_value)
            }]
        },
        {
            name: gauge_name,
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: 120,
            center: ['35%', '45%'], // 默认全局居中  
            min: min,
            max: max,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 45,
                    shadowBlur: 0,
                    color: [
                        gaugeColor, [1, '#ccc']
                    ]
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show: false
            },
            detail: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: "#323232",
                }
            },
            data: [{
                name: "",
                value: Math.floor(gauge_value)
            }]
        },
        {
            name: gauge_name,
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: 120,
            splitNumber: 1,
            center: ['65%', '45%'], // 默认全局居中  
            min: min,
            max: max,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 45,
                    shadowBlur: 0,
                    color: [
                        [1, '#ccc']
                    ]
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                length: 20,

            },
            axisLabel: {
                show: true,
                padding: [20, 0, 0, 0],
                fontSize: 12,
                distance: -2
            },
            pointer: {
                show: false
            },
            detail: {
                offsetCenter: [0, -15],
                textStyle: {
                    fontSize: 40,
                    fontWeight: '',
                    color: '#ccc'
                },
                formatter: function(value) {
                    return value + unit;
                }

            },
            itemStyle: {
                normal: {
                    color: "#323232",
                }
            },
            data: [{
                name: "",
                value: Math.floor(gauge_value2)
            }]
        },
        {
            name: gauge_name,
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: 120,
            center: ['65%', '45%'], // 默认全局居中  
            min: min,
            max: max,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 45,
                    shadowBlur: 0,
                    color: [
                        gaugeColor2, [1, '#ccc']
                    ]
                }
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show: false
            },
            detail: {
                show: false
            },
            itemStyle: {
                normal: {
                    color: "#323232",
                }
            },
            data: [{
                name: "",
                value: Math.floor(gauge_value2)
            }]
        }
    ]
};