需求:根据接口的数据,做一个显示当天光照度的图表
之前没有用过time类型的时间轴,尝试用category写了半天,还是有bug
解决方案:
//下面是一个简单的demo,方便展示数据格式和构成
let config = {
legend: {
data: ['光照度'],
textStyle: {
color: '#FFF',
},
},
xAxis: {
type: 'time',
splitNumber: 8,
boundaryGap: false,
min: '2023-12-01 00:05:12',
max: '2023-12-01 23:49:01',
axisLabel: {
color: '#FFFFFF',//x轴文字颜色
rotate: 0,
},
},
yAxis: [{
type: 'value',
splitLine: {
show: false, //去除网格线
},
axisLine: {
//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: '#FFFFFF',
width: 1,
type: 'solid',
},
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)',
},
},
}],
series: [
{
name: '光照度',
data: [['2023-12-01 00:05:12', '0'],['2023-12-01 00:15:16', '0'],['2023-12-01 10:49:01', null],['2023-12-01 23:49:01', null]],//注意,这里的数据是二维数组,xAxis里面并不设置数据
type: 'line',
},
],
}