Echarts-显示24小时得数据

<div class="test"></div>

ngOnInit() {
let mytestcharts = echarts.init(document.querySelector('.test') as any);
    let data1 = [
      {name:'2022/12/18 6:38:08', value:['2022/12/18 6:38:08', 80]},
      {name:'2022/12/18 16:18:18', value:['2022/12/18 16:18:18', 60]},
      {name:'2022/12/18 19:18:18', value:['2022/12/18 19:18:18', 90]},

      {name:'2022/12/19 4:38:08', value:['2022/12/19 4:38:08', 70]},
      {name:'2022/12/19 14:18:18', value:['2022/12/19 14:18:18', 50]},
      // {name:'2022/12/19 17:18:18', value:['2022/12/19 17:18:18', 80]}
    ];
    let data2 = [
      {name:'2022/12/18 7:38:08', value:['2022/12/18 7:38:08', 90]},
      {name:'2022/12/18 18:18:18', value:['2022/12/18 18:18:18', 70]},
      {name:'2022/12/18 20:18:18', value:['2022/12/18 20:18:18', 100]},
      {name:'2022/12/19 5:38:08', value:['2022/12/19 5:38:08', 60]},
      {name:'2022/12/19 15:18:18', value:['2022/12/19 15:18:18', 40]},
      {name:'2022/12/19 18:18:18', value:['2022/12/19 18:18:18', 70]}
    ];
    
    let anchor = [
      {name:'2022/12/18 00:00:00', value:['2022/12/18 00:00:00', 0]},
      {name:'2022/12/19 00:00:00', value:['2022/12/19 00:00:00', 0]},
    ];
  
    let option = {
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        legend: {
          data: ['机台1', '机台2']
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params:any) {
                params = params[0];
                let date = new Date(params.name);
                return params.value[0] + ' : ' + params.value[1];
                // return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            },
            axisLabel: {
              formatter: function (value:any, index:any) {
                //格式化成月/日，只在第一个刻度显示年份
                let date = new Date(value);
                let texts:any = [];
                if (date.getHours() === 0) {
                  texts= [date.getFullYear(),(date.getMonth() + 1), date.getDate()];
                  return texts.join('-');
                } else {
                  texts= [date.getHours(),date.getMinutes()];
                  return texts.join(':');
                }
              }
            }
            
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [
	        {
	            name: '机台1',
	            type: 'line',
	            showSymbol: true,
	            hoverAnimation: false,
	            data: data1
	        },
	        {
	          name: '机台2',
	          type: 'line',
	          showSymbol: false,
	          hoverAnimation: false,
	          data: data2
	      },
	      {
	            name:'anchor',
	            type:'line', 
	            showSymbol:false, 
	            data:anchor,
	            itemStyle:{normal:{opacity:0}},
	            lineStyle:{normal:{opacity:0}},
	          
	        }
      ]
    };
    console.log(option);
    // mytestcharts.setOption(option);
}

运行效果：