我使用三个数据系列,每个数据系列中有624条记录,并且所有内容都像一个迷住了 chart with 624 records
但是当我在每个人中使用三个带有1982记录的数据系列时,第二行消失了 chart with 1982 records
我的代码:
function apexchart(humList, dateList, tempList) {
new Vue({
el: '#apexchart',
components: {
apexchart: VueApexCharts,
},
data: {
series: [{
name: "Température",
data: tempList
},
{
name: 'Humidité',
data: humList
},
],
chartOptions: {
chart: {
animations: {
enabled: false,
},
toolbar: {
show: true,
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
},
autoSelected: 'zoom'
},
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight',
width: [, 2],
},
colors: ['#ff6347', '#1565c0'],
title: {
text: 'Capteur N°:3456789',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
yaxis: [{
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FF1654"
},
labels: {
style: {
colors: "#FF1654"
}
},
title: {
text: "Température (°C)",
style: {
color: "#FF1654"
}
},
},
{
opposite: true,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#247BA0"
},
labels: {
style: {
colors: "#247BA0"
}
},
title: {
text: "Humidité (%)",
style: {
color: "#247BA0"
}
}
}
],
xaxis: {
type: 'datetime',
categories: dateList,
labels: {
rotate: -90,
rotateAlways: true,
hideOverlappingLabels: true,
showDuplicates: false,
trim: false,
minHeight: 50,
maxHeight: 50,
style: {
colors: [],
fontSize: '8px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 400,
cssClass: 'apexcharts-xaxis-label',
},
datetimeFormatter: {
year: 'yyyy',
month: 'MMM \'yy',
day: 'dd MMM',
hour: 'HH:mm'
}
}
},
legend: {
position: 'top',
onItemHover: {
highlightDataSeries: true
},
labels: {
colors: undefined,
useSeriesColors: true
},
},
},
},
})
}