Data zoom background is unhelpful for step line series and time series

Bilge commented 4 years ago

Version

4.9.0

Steps to reproduce

Add data series with step line.
Add data zoom slider.

Furthermore, it seems to treat the data as categories instead of a time series, even when the corresponding axis is correctly configured as time type. This is also clear because each data point is evenly spaced apart, ignoring the time series.

What is expected?

Preview should closely match step line data series.

What is actually happening?

Preview is drawn in regular style, ignoring steps.

echarts-bot[bot] commented 4 years ago

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 you have posted enough image to demo your request. 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 questions.

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

Have a nice day! 🍵

helgasoft commented 4 years ago

Could it be the dollar sign ($) in front of the prices? If so, they are not numbers. This code works fine:

<!DOCTYPE html>
<html  style="height: 100%">
<head>
<!--
    https://github.com/apache/incubator-echarts/issues/13408
    https://echarts.apache.org/examples/en/editor.html?c=line-step
-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>price on Stepline</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

</head>

<body style="height: 100%; width:100%; margin: 0">
    <div id="chart" style="height:90%; width:100%; min-height: 400px;"></div>

<script type="text/javascript">

    let dom = document.getElementById("chart");
    let myChart = echarts.init(dom);

option = {
    title: {     text: 'Step Line'  },
    tooltip: {   trigger: 'axis'  },
    toolbox: {
        feature: {  saveAsImage: {}  }
    },
    xAxis: {
        type: 'category',
        data: ['2020-06-08','2020-06-09','2020-06-10','2020-06-11','2020-06-12','2020-06-15','2020-06-16','2020-06-17','2020-06-18','2020-06-19','2020-06-22','2020-06-23','2020-06-24','2020-06-29','2020-06-30','2020-07-01','2020-07-02','2020-07-03','2020-07-06','2020-07-07','2020-07-08','2020-07-09','2020-07-10','2020-07-13','2020-07-14','2020-07-15','2020-07-16','2020-07-17','2020-07-20','2020-07-21','2020-07-22','2020-07-23','2020-07-24','2020-07-27','2020-07-28','2020-07-29','2020-07-30','2020-07-31','2020-08-03','2020-08-04','2020-08-05','2020-08-06','2020-08-07','2020-08-10','2020-08-11','2020-08-12','2020-08-13','2020-08-14','2020-08-17','2020-08-18','2020-08-19','2020-08-20','2020-08-21','2020-08-24','2020-08-25','2020-08-26','2020-08-27','2020-08-28','2020-08-03','2020-08-04','2020-08-05','2020-08-06','2020-08-07','2020-08-10','2020-08-11','2020-08-12','2020-08-13','2020-08-14','2020-08-17','2020-08-18','2020-08-19','2020-08-20','2020-08-21','2020-08-24','2020-08-25','2020-08-26','2020-08-27','2020-08-28','2020-08-31','2020-09-01','2020-09-02','2020-09-03','2020-09-04','2020-09-07','2020-09-08','2020-09-09','2020-09-10','2020-09-11','2020-09-14','2020-09-15','2020-09-16','2020-09-17','2020-09-18','2020-09-21','2020-09-22','2020-09-23','2020-09-24','2020-09-25','2020-09-28','2020-09-29']
    },
    yAxis: {
        type: 'value', scale: true
    },
    series: [
        {
            name: 'price',
            type: 'line',
            step: 'middle',
            data: [1686.43,1688.3,1708.2,1720.33,1717.22,1709.76,1713.18,1713.18,1712.25,1714.42,1736.82,1731.84,1745.84,1745.84,1748.64,1763.26,1747.39,1752.37,1751.13,1761.08,1767.61,1787.83,1770.41,1780.05,1773.83,1779.74,1775.39,1762.95,1774.14,1784.72,1832.93,1836.04,1846.3,1894.51,1892.65,1897.62,1884.25,1904.78,1906.02,1905.09,1960.45,1983.47,1988.76,1974.45,1937.44,1818.93,1849.41,1867.45,1883.63,1927.17,1903.85,1862.48,1869.32,1854.39,1860.92,1859.37,1884.56,1889.23,1906.02,1905.09,1960.45,1983.47,1988.76,1974.45,1937.44,1818.93,1849.41,1867.45,1883.63,1927.17,1903.85,1862.48,1869.32,1854.39,1860.92,1859.37,1884.56,1889.23,1901.05,1929.35,1910.07,1872.74,1880.52,1881.76,1884.25,1877.41,1896.07,1890.78,1895.45,1911.31,1911.62,1898.25,1907.89,1906.64,1857.5,1826.71,1797.78,1822.35,1815.2,1839.46]
        }],
    dataZoom: [
    {
        type: 'slider',
        show: true,
        realtime: true,
        start: 70,
        end: 100,
        xAxisIndex: [0],
    }]
};
if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

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

Bilge commented 4 years ago

No. The data does not include dollar signs. Furthermore, your example is not a real time series, it's a category series where the categories are dates. A real time series does not necessarily increment in even intervals: there may be large, irregular gaps. In the case there are irregular intervals, the data zoom background displays incorrectly. Even in your example, it does not display in a stepped fashion.

Bilge commented 3 years ago

@pissang This is still a major omission from the data zoom component. Is there any plan to address the series preview in either v4 or v5?

pissang commented 3 years ago

@Bilge Planned in 5.2.0.

Bilge commented 2 years ago

@pissang Can this get a new milestone?

praful-hunde commented 1 year ago

The preview in the slider can be very useful. But the preview does not always align with the actual view above it for X-Axis and similarly for the vertical Axis. In the case of a line graph, miss alignment is more evident when data points are fewer. The behavior can be realized with this example. A way to closely align the slider preview with rendered lines/content will be very useful.

apache / echarts