缺點： 曲線根據寬度自動縮放，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;
},