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 = ElementById(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: aphic.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: {
setoption
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 place(/-/g, '/'));
}
// const y = FullYear();
// let m = Month() + 1;
// m = m < 10 ? '0' + m : m;
// let d = Date();
// d = d < 10 ? ('0' + d) : d;
let h = Hours();
//h = h < 10 ? '0' + h : h;
let mi = Minutes();
//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);
this[id] = chart;
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。