关键点:
splitNumber: 8, //分成8段
min: new Date(time_min), //开始时间当天00:00
max: new Date(time_max) //结束时间第二天00:00
function pm() {
// 显示标题,图例和空的坐标轴
var i = 0;
var now_data = new Date()
var year_now = now_data.getFullYear(), month_now = now_data.getMonth() + 1, day_now = now_data.getDate();
var test = now_data.setDate(now_data.getDate()+1);
var time_min = `${year_now}/${month_now}/${day_now} 00:00:00`;
var time_max = moment(test).format("YYYY-MM-DD")+' 00:00:00'; //引入moment.js库
var mytime24 = [
["2021-6-4 00:00:00",0.3],
["2021-6-4 8:20:20",0.3],
["2021-6-4 10:00:00",0.5],
["2021-6-4 23:59:00",0.4]
]
var myChart = echarts.init(document.getElementById('pm'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'PM2.5和PM10',
left: 'center',
textStyle: { color: '#E43D3E' }
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
dataZoom: [{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter',
start: 0,
end: 100
}],
legend: {
show: true,
top: 30,
data: ['PM2.5', 'PM10']
},
xAxis: {
type: 'time',
show: true,
splitLine: {
show: false
},
axisLabel:{
formatter:function(value,index){
var showD = moment(value).format('MM-DD');
var showH = moment(value).format('HH:mm');
return showD+'\n'+showH;
}
},
splitNumber: 8,
min: new Date(time_min),
max: new Date(time_max)
},
yAxis: {
name: '单位:ug/m³',
type: 'value',
axisLine: {
//y轴线的颜色以及宽度
show: true
},
},
grid: {
bottom: '75px',
},
series: [
{
name: 'PM2.5',
type: 'line',
data: mytime24,
smooth: true
},
{
name: 'PM10',
type: 'line',
data: mytime24,
smooth: true
}
]
};
myChart.setOption(option, true);
}
pm();