使用ApexCharts时日期加时间比实际时间少8小时

使用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