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

 

 

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

 

 

 

核心：

axisLabel farmatter方法

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

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

        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;
        },