Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

With dataZoom displaying data per second for 24 hours of the day, dataZoom cannot display thumbnails, and tooltip does not display data. #16109

Closed
legcc opened this issue Nov 25, 2021 · 4 comments
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature. stale Inactive for a long time. Will be closed in 7 days. waiting-for: community

Comments

@legcc
Copy link

legcc commented Nov 25, 2021

Version

5.2.2

Steps to reproduce

<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=multiple-x-axis
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

        <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};

var option;

const times = []
const second = 86400
const initStart = new Date(new Date().toLocaleDateString()).getTime()
const data = {
  [initStart]: [initStart, 100],
  [initStart   400000]: [initStart   400000, 120],
  [initStart   1000000]: [initStart   1000000, 130],
  [initStart   2000000]: [initStart   2000000, 160],
  [initStart   3000000]: [initStart   3000000, 10],
}

let start = initStart
for (let i = 0; i < second; i  ) {
  if (!!data[start]) {
    times.push(data[start])
  } else {
    times.push([start, null])
  }
  start  = 1000
}

const colors = ['#5470C6', '#EE6666'];
 option = {
  color: ['#2db7f5'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      animation: false,
      label: {
        backgroundColor: '#505765',
      },
    },
  },
  xAxis: {
    type: 'time',
    splitNumber: 12,
    minInterval: 30 * 60 * 1000,
    maxInterval: 60 * 60 * 1000,
    axisLabel: {
      formatter: '{HH}:{mm}',
      showMinLabel: true,
      showMaxLabel: true,
      hideOverlap: true,
    },
  },
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 25,
      minValueSpan: 30 * 60 * 1000,
    },
  ],
  yAxis: {
    type: 'value',
    name: '功率(kW)',
  },
  series: [
    {
      data: times,
      type: 'line',
      smooth: true,
      symbol: null,
      symbolSize: 0,
      connectNulls: true,
      markPoint: {
        symbolSize: 40,
        data: [
          { xAxis: initStart, yAxis: 100 },
          { xAxis: initStart   400000, yAxis: 120 },
          // { xAxis: initStart   1000000, yAxis: 130 },
          { xAxis: initStart   2000000, yAxis: 160 },
          { xAxis: initStart   3000000, yAxis: 10 },
        ],
        label: {
          show: false,
        },
        itemStyle: {
          color: '#d9001b',
          borderWidth: 1,
          borderColor: '#fff',
          shadowColor: '#333',
          shadowBlur: 5,
        },
      },
    },
  ],
  // style: { height: 800 },
  // opts: { locale: 'FR' },
}

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

        </script>
    </body>
</html>

What is expected?

Solution

What is actually happening?

..


I always want to display 24 hours of data, the minimum zoom precision is seconds, but dataZoom does not display data thumbnails, and tooltips cannot be displayed.

@echarts-bot
Copy link

echarts-bot bot commented Nov 25, 2021

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to dev@echarts.apache.org. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

@echarts-bot echarts-bot bot added bug en This issue is in English pending We are not sure about whether this is a bug/new feature. waiting-for: community labels Nov 25, 2021
@legcc
Copy link
Author

legcc commented Nov 25, 2021

企业微信截图_16378292061168
企业微信截图_16378293452607
企业微信截图_1637829389719

Copy link
Contributor

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

@github-actions github-actions bot added the stale Inactive for a long time. Will be closed in 7 days. label Nov 30, 2023
Copy link
Contributor

github-actions bot commented Dec 8, 2023

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug en This issue is in English pending We are not sure about whether this is a bug/new feature. stale Inactive for a long time. Will be closed in 7 days. waiting-for: community
Projects
None yet
Development

No branches or pull requests

1 participant