echarts 曲线图显示小时整点数据，忽略分钟数据

1	`缺点：曲线根据宽度自动缩放，X轴不会显示所有小时。宽度很小是变成这样：`

核心：

1	`axisLabel farmatter方法`

let xAxisData=data.map(function (item) {
        return item['TIMESTAMP']; 
 });

1	`item['TIMESTAMP'] 数据举例：2020-10-11 20:10:00、2020-10-11 20:20:00`

1	`<br><br>`

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

initSunshineHours(id,data){
    let chartElement = document.getElementById(id);
    chartElement.style.height = '260px';
    let chart = echarts.init(chartElement);
    chart.dispose();
    chart = echarts.init(chartElement);
    let legendData=['光合有效辐射','2cm热通量'];
    let units=['umol/㎡/s','W/m2'];
    let yAxisName='';
    let series=[];
    let pms='';
 
 
    switch(id) {
        case "sunshineHours":
           pms='PAR_Avg';
           yAxisName=legendData[0]+'('+units[0]+')'
            break;
        case "heatFlux":
           pms='GS_2cm_Avg';
           yAxisName=legendData[1]+'('+units[1]+')'
            break;
        default:
            break;
    } 
    let xAxisData=data.map(function (item) {
             //return util.formatTime (new Date(item['TIMESTAMP'])) 
             //return new Date(item['TIMESTAMP']) 
                 return item['TIMESTAMP'];
     });
    
   
          series.push({
             data: data.map(function (item) {
                 let tmp= item[pms]
                return tmp;
            }),
            name: yAxisName,
            type: 'line',
            stack:'总量',
            smooth: true, //这句就是让曲线变平滑的
            connectNulls: true,//断点连接
            symbol: 'none',
            areaStyle: {}
            // areaStyle:{
            //     color:"red"
            // },
            // areaStyle:{
            //                 color: {
            //                     type: 'linear',
            //                     x: 0,
            //                     y: 0,
            //                     x2: 0,
            //                     y2: 1,
            //                     colorStops: [{
            //                         offset: 0, color: 'red' // 0% 处的颜色
            //                     }, {
            //                         offset: 1, color: 'white' // 100% 处的颜色
            //                     }],
            //                     global: false // 缺省为 false
            //                 }
            //             } ,
            // areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //         offset: 0,
            //         color: 'rgb(255, 158, 68)'
            //     }, {
            //         offset: 1,
            //         color: 'rgb(255, 70, 131)'
            //     }])
            // },
           
         })
 
 
    let option = {
        grid: {
            top: 50,
            left: 45,
            right: '4%',
            bottom: '2%',//2
            containLabel: true
        },
        tooltip: {
         
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            //boundaryGap: false,
            data: xAxisData,
 
            axisLabel:{
                //interval: 0,  //坐标轴刻度标签的显示间隔.设置成 0 强制显示所有标签。设置为 1，隔一个标签显示一个标签。
                 //rotate: 45,//倾斜度 -90 至 90 默认为0
                // textStyle: {
                //     fontWeight: "bold",  //加粗
                //     color: "#000000"   //黑色
                // },
                formatter:function(date,index){
                    console.log('formatter',date,index);
                        if (date) {
                            if (typeof (date) === 'string') {
                                date = new Date(date.replace(/-/g, '/'));
                            }
                            // const y = date.getFullYear();
                            // let m = date.getMonth() + 1;
                            // m = m < 10 ? '0' + m : m;
                            // let d = date.getDate();
                            // d = d < 10 ? ('0' + d) : d;
                            let h = date.getHours();
                            //h = h < 10 ? '0' + h : h;
                            let mi = date.getMinutes();
                            //let mi2 = mi < 10 ? '0' + mi : mi;
                            //return h+ ':' + mi;
                             //console.log('mi',mi)
                            if(mi==0){ 
                                return h;
                            }
                            //   return h+ ':' + mi2;
                             
                        } else {
                            return null;
                        }
                }
            }
 
            // axisPointer:{
            //     label:{
            //         formatter: function(data){
            //             console.log('xAxis',data)
            //             return "10";
            //         }   
            //     } 
            // }
 
        },
        yAxis: { 
            name:yAxisName,
            type: 'value',
 
        },
        series: series,
 
    };
 
 
    chart.setOption(option);
    chart.resize();
    this[id] = chart;
},