[Bug] Echarts are plotted wrongly for type time, if the time data is given with timezone offset

8yoxcaq7  于 8个月前  发布在  Echarts
关注(0)|答案(6)|浏览(265)

Version

5.2.1

https://codesandbox.io/s/area-pieces-forked-v068xl?file=/index.html

Steps to Reproduce

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Area Pieces - Apache ECharts Demo</title>
  6.   <link rel="stylesheet" href="./style.css">
  7. </head>
  8. <body>
  9.   <div id="chart-container"></div>
  10.   <script src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  11.   <script src="./index.js"></script>
  12. </body>
  13. </html>

index.js

  1. var dom = document.getElementById("chart-container");
  2. var myChart = echarts.init(dom, null, {
  3.   renderer: "canvas",
  4.   useDirtyRect: false
  5. });
  6. var app = {};
  8. var option;
  10. option = {
  11.   xAxis: {
  12.     type: "time",
  13.     boundaryGap: false
  14.   },
  15.   yAxis: {
  16.     type: "value",
  17.     boundaryGap: [0, "30%"]
  18.   },
  19.   visualMap: {
  20.     type: "piecewise",
  21.     show: false,
  22.     dimension: 0,
  23.     seriesIndex: 0,
  24.     pieces: [
  25.       {
  26.         gt: 1,
  27.         lt: 3,
  28.         color: "rgba(0, 0, 180, 0.4)"
  29.       },
  30.       {
  31.         gt: 5,
  32.         lt: 7,
  33.         color: "rgba(0, 0, 180, 0.4)"
  34.       }
  35.     ]
  36.   },
  37.   series: [
  38.     {
  39.       type: "line",
  40.       smooth: 0,
  41.       symbol: "none",
  42.       lineStyle: {
  43.         color: "#5470C6",
  44.         width: 5
  45.       },
  46.       markLine: {
  47.         symbol: ["none", "none"],
  48.         label: { show: false },
  49.         data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
  50.       },
  51.       areaStyle: {},
  52.       data: [
  53.         ["2022-05-31 17:25:00+05:30", 19],
  54.         ["2022-05-31 17:30:00+05:30", 29],
  55.         ["2022-05-31 17:35:00+05:30", 39],
  56.         ["2022-05-31 17:40:00+05:30", 49],
  57.         ["2022-05-31 17:45:00+05:30", 19],
  58.         ["2022-05-31 17:50:00+05:30", 19],
  59.         ["2022-05-31 17:55:00+05:30", 19],
  60.         ["2022-05-31 18:00:00+05:30", 19],
  61.         ["2022-05-31 18:05:00+05:30", 19],
  62.         ["2022-05-31 18:10:00+05:30", 19],
  63.         ["2022-05-31 18:15:00+05:30", 19]
  64.       ]
  65.     }
  66.   ]
  67. };
  69. if (option && typeof option === "object") {
  70.   myChart.setOption(option);
  71. }
  73. window.addEventListener("resize", myChart.resize);

Here in the series data, along with date and time, timezone (+05:30) is also provided.

Current Behavior

The chart plotted against the data is skewed by 30 mins.

Expected Behavior

Users expect the chart to start the plotting from 17:25 but it begins at 17:55 and is expected to end at 18:15 but ends at 18:45.

Environment

  1. - OS: Windows
  2. - Browser: Chrome
  3. - Framework: Vanilla JS, Angular@11

Any additional comments?

No response

echarts

6条答案

按热度按时间
b4qexyjb

b4qexyjb1#

As is tested, there seems not to be such bugs in 5.3.x.. Would you mind trying using 5.3.x to plot?

赞(0）分享  回复(0）举报  8个月前
ulmd4ohb

ulmd4ohb2#

The reproduction link which I have provided uses the echart version 5.3.2 and the problem still exists.

Minimal reproduction link

赞(0）分享  回复(0）举报  8个月前
gr8qqesn

gr8qqesn3#

Right, what I am seeing is as followed in your link:

And it doesn't look like what you've provided in the issue and looks good to me.
Is this demo what you think is problematic? Did I miss anything?

赞(0）分享  回复(0）举报  8个月前
mkshixfv

mkshixfv4#

My current time zone is (GMT+5:30) Indian Standard Time. So for the data point ["2022-05-31 17:25:00+05:30", 19] the line should be plotted at 17:25, but currently, it's plotting to 17:55 which is differed by 30 minutes.

I am not sure about your time zone. So to test in your system, you can change your system's timezone to (GMT+5:30) and check the output

赞(0）分享  回复(0）举报  8个月前
vkc1a9a2

vkc1a9a25#

Can confirm, we have the same issue. Our local TZ is UTC+8:00, but the data is UTC+9:30. The data is offset by 30 mins, as if it is interpretting the timezone as UTC+9.

赞(0）分享  回复(0）举报  8个月前
ma8fv8wu

ma8fv8wu6#

Still exists in echarts 5.5.0

赞(0）分享  回复(0）举报  8个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com