JS/HTML 后端传递不同时间的多条曲线---前端画在同一个时间轴上

后端传递数字，注意时间格式例如”2023-12-29 11:11:11"

@app.route('/Datademo', methods=['GET'])
def Datademo():
    datalist_send = []
    colomn_send = []
    timestamp_send = []
    for Filename_demodata in file_list:
        print(Filename_demodata)
        FL = Loader_csv_def.Loader_csv_def(Filename_demodata)
        #get the timestamp
        timestamp = FL.GetTimeStamp('utc') 

        timestamp_mid = []
        for i in range(len(timestamp)):  
            timestamp_mid.append(timestamp[i].strftime("%Y-%m-%d %H:%M:%S")) 
 
        datalist = [] 
        colomn = []
        colomn_list = FL.GetColumnTitle()

        #get all the data list based the flags
        for k in range(len(colomn_list)):
            if('local' not in colomn_list[k].lower() and 'utc' not in colomn_list[k].lower()): #don't send time to front
                datalist.append(FL.FromFlagGetList(colomn_list[k]))
                colomn.append(colomn_list[k])
        timestamp_send.append(timestamp_mid)
        datalist_send.append(datalist)
        colomn_send.append(colomn)
    return jsonify(timestamp_html = timestamp_send, title_html = colomn_send, data_html = datalist_send)

初始化html

• 注意时间轴的数据为空，时间轴数据用series里面data的时间标签
• 数据series为空，前端接受后填满

 var option = {
            backgroundColor: '#ffffff',//背景色
            title: {
                //  text: '|Page_DataDemo',
                 textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                         //fontFamily: 'Arial, Verdana, sans...',
                         fontSize: 30,
                         fontStyle: 'bolder',
                         fontWeight: 'normal',
                     },
             },
             tooltip: {},
             legend: {
                 textStyle: { //图例文字的样式
                     //color: '#fff',
                     fontSize: 10
                 }, 
             },
             toolbox: {
                 show : true,
                 itemSize: 20,
                 //x:150,
                 //y:0,
                 feature : {
                     mark : {show: true},
                     restore : {show: true},
                     dataZoom:{show:true},
                     saveAsImage:{show:true},
                 }
             },
             calculable : true,
             // dataZoom : {
             //         show : true,
             //         realtime: true,
             //         start : 50,
             //         end : 100
             //     },
             tooltip: {
                 trigger:'axis'  //弹窗组件
             },
             xAxis: 
             [
                {
                // 根据x轴数据决定type类型
                name: "time[m-d H:M:S]",
                boundaryGap: false,
                splitLine:{show: false,},
                // 注： x轴不指定data,自动会从series取
             }, 
            ], 
             yAxis:
            [
                {
                 splitArea : {show : true},//保留网格区域
                 splitLine:{
                     show: false,
                     lineStyle:{
                         color:['#315070'],
                         width: 1,
                         type: "dotted" //solid
                     }
                 },
                 type: 'value', 
                 min: 0, 
                 nameLocation: "center",
                 nameGap: 30,
             },
            ],
 
            series: []
          }
         myChart_home.setOption(option);

接受后端传递的数据后，进行series填满，每个数据都需要时间标签

         myChart_home.showLoading();
 
         $.get('/Datademo').done(function (data) {
            console.log("--------------this is a start--------------")
            console.log(data.title_html)
            console.log(data.data_html)
            console.log(data.timestamp_html)
            var series1 = new Array()

            for (var i=0;i<data.timestamp_html.length;i++){ 
                for (var j=0;j<data.title_html[i].length;j++){
                    var combine_time_data = []
                    for (var k=0;k<data.data_html[i][j].length;k++){
                        // 格式 data: [ ['2010-11-11 00:00:00', 6],['2010-15-11 00:00:00', 16] ]
                        combine_time_data.push([data.timestamp_html[i][k], data.data_html[i][j][k]])
                    }
                    
                    // console.log(combine_time_data)

                    series1.push({name:data.title_html[i][j], 
                                  type: 'line',  
                                  data: combine_time_data
                                })
                } 
            }
            console.log('---------point x1------------') 
 
            console.log(series1) 
            // 填入数据
            myChart_home.hideLoading();
            myChart_home.setOption({
                series: series1
                });
         });