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

yftpprvb 于 5个月前发布在 Echarts

关注(0)|答案(7)|浏览(68)

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

来源：https://github.com/apache/echarts/issues/13408

7条答案

按热度按时间

gojuced71#

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! 🍵

赞(0）回复(0）举报 5个月前

vsmadaxz2#

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>

赞(0）回复(0）举报 5个月前

0mkxixxg3#

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.

赞(0）回复(0）举报 5个月前

q5lcpyga4#

@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?

赞(0）回复(0）举报 5个月前

wecizke35#

@Bilge Planned in 5.2.0.

赞(0）回复(0）举报 5个月前

erhoui1w6#

@pissang Can this get a new milestone?

赞(0）回复(0）举报 5个月前

4xrmg8kj7#

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.

赞(0）回复(0）举报 5个月前

我来回答

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

Version

Steps to reproduce

What is expected?

What is actually happening?

7条答案

相关问题

热门标签

最新问答