the line chart with area echarts-

 

Test Address HTTPS: // gallery.echartsjs.com/editor.html?c=x6p5SsIEzt 


var listn = 'high temperature' ;
 var Unit = '[deg.] C'; // units 
var timeArray = ["20:00", "20:05", "20:10", "20:15", "20:20", "20:25", "20:30", "20:35", "20:40", "20:45", "20:50", "20:55", "21:00", "21:05", "21:10", "21:15", "21:20", "21:25", "21:30", "21:35", "21:40", "21:45", "21:50", "21:55", "22:00", "22:05", "22:10", "22:15", "22:20", "22:25", "22:30", "22:35", "22:40", "22:45", "22:50", "22:55", "23:00", "23:05", "23:10", "23:15", "23:20", "23:25", "23:30", "23:35", "23:40", "23:45", "23:50", "23:55", "00:00", "00:05", "00:10", "00:15", "00:20", "00:25", "00:30", "00:35", "00:40", "00:45", "00:50", "00:55", "01:00", "01:05", "01:10", "01:15", "01:20", "01:25", "01:30", "01:35", "01:40", "01:45", "01:50", "01:55", "02:00", "02:05", "02:10", "02:15", "02:20", "02:25", "02:30", "02:35", "02:40", "02:45", "02:50", "02:55", "03:00", "03:05", "03:10", "03:15", "03:20", "03:25", "03:30", "03:35", "03:40", "03:45", "03:50", "03:55", "04:00", "04:05", "04:10", "04:15"]; //时间
var dataArray = ["7.2", "7.6", "7.4", "7.1", "6.7", "6.4", "6.3", "6.3", "6.0", "6.0", "6.0", "6.0", "6.0", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.8", "6.7", "6.7", "6.6", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.5", "6.4", "6.4", "6.4", "6.4", "6.3", "6.0", "5.8", "5.5", "5.3", "5.1", "5.1", "5.1", "5.1", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.2", "5.3", "5.2", "4.9", "4.8", "4.4", "4.0", "3.9", "3.9", "3.9", "3.9", "3.9", "3.9", "3.5", "3.2", "2.9", "2.5", "2.1", "1.9", "1.8", "1.6", "1.5", "1.4", "1.4", "1.4", "1.4", "1.3", "1.1", "1.1", "1.0", "0.8", "0.5", "0.4", "0.4", "0.4", "0.4", "0.4", "0.6", "0.6", "0.6"]; //data

option = {
     the backgroundColor: '# 000', // background color 
     
     title: { 
          left: 'Center' , 
          text: 'Job Number robot' , 
          textStyle: { 
              Color: '#fff' // Title Color 
          } 
     }, 
    
    ToolTip: { 
        Trigger: ' Axis' , 
        Formatter: ( '<br /> {B} {a}: {C}' + Unit), 
    }, 

    dataZoom: { 
        bottom: '0' , 
         start: 10, // start window range of percentages 
         end: 30,  // end of the range of the percentage of the data window
           handleSize: "50%",
        dataBackground: {
            lineStyle: {
                color: '#02C2FF'
            },
            areaStyle: {
                color: 'rgba(2,194,255,1)'
            }
        },
        borderColor: 'rgba(2,194,255,0.2)',
        textStyle: {
            color: '#02C2FF',
        }
    },
    
    
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        
        axisLine: {
            show: true, 
            The lineStyle: { 
                 Color: 'RGBA (2,194,255,0.2)' // abscissa that a color line 
            }, 
         }, 
         
         AxisLabel: { 
            textStyle: { 
                 Color: '# 02C2FF', // color abscissa field name 
                // Color: "Red", 
                the fontSize: 12 is , 
                margin: 15 , 
            }, 
        }, 
        axisTick: {Show: to false ,}, 
        Data: timeArray 
    }], 
    
    
    YAXIS: [{ 
        type: 'value' , 
        
        SplitLine: {
            Show: to true , 
            the lineStyle: { 
                 Color: 'RGBA (2,194,255,0.2)', // abscissa dividing line color 
            
            } 
        }, 
        
        axisLine: {Show: to false ,}, 
        AxisLabel: { 
             margin: . 6 , 
            textStyle: { 
                Color: ' # 02C2FF ' 
            }, 
            Formatter: ( ' {value} '+ Unit) 
        }, 
        axisTick: {Show: to false ,}, 
        Data: [ ' 0 ','. 4 ','. 8 ',' 12 is', '16', '20']
    }],
     
    Series:[{
        name: listn, 
        type: 'Line' , 
           Symbol: 'Circle' , 
        SymbolSize: . 4 , 
        the lineStyle: { 
            Normal: { 
                Opacity: 0 
            } 
        }, 
        
        ItemStyle: { 
            Color: '#FFFFFF' 
        }, 
        
        AreaStyle: { // area fill style 
            Normal: { 
                Color: new new echarts.graphic.LinearGradient (0, 0, 0,. 1 , [ 
                   {offset: 0, Color: 'RGBA (2,194,255,1)'},// upper region
                   Offset {: 0.7, Color: '(2,194,255,0.6) RGBA'} // region of the lower side 
                ], to false ) 
            } 
        }, 
        
        Data: dataArray is 
    }] 
};