使用ApexCharts时日期加时间比实际时间少8小时
原来的代码
html
<div id="chart-timeline">
<apexchart type="area" height="350" ref="chart" :options="chartOptions" :series="series"></apexchart>
</div>
js
var options = {
chart: {
id: 'area-datetime',
type: 'area',
height: 350,
zoom: {
autoScaleYaxis: true
}
},
series: [{
name: 'sales',
data: [
[new Date("2022-02-28 5:00:00"),30.95],
[new Date("2022-02-28 10:00:00"),31.34],
[new Date("2022-02-28 12:00:00"),31.18],
[new Date("2022-02-28 17:00:00"),20.18],
]
}],
markers: {
size: 0,
style: 'hollow',
},
xaxis: {
type: 'datetime',
},
tooltip: {
x: {
format: 'yyyy-MM-dd HH:mm:ss'
}
},
}
var chart = new ApexCharts(document.querySelector("#chart-timeline"), options);
chart.render();
测试发现x轴的时间比我date中的时间少了八小时
解决
查阅资料后发现是时区问题,在官方文档中找到了
在xaxis中添加,完美解决问题
xaxis: {
type: 'datetime',
labels: {
datetimeUTC : false,
}
},
附
官方文档:https://apexcharts.com/javascript-chart-demos/area-charts/datetime-x-axis/
测试检验地址:https://codepen.io/apexcharts/pen/xYqyYm