Echarts: Line dissapear when Zooming in

Question

I try to programm a Line Chart in echarts Version 4.1.0. I'm using different browser like Chrome Version 69.0.3497.100 or Firefox 63.0.1 (64-Bit). My issue is, if I zoom the x axis, the connecting lines disappear if the points are outside the focus:

Thats my code for this example:

<html>
<head>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0-release/echarts-en.min.js"></script>


</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>

<script type="text/javascript">

    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main_chart'));

    var app = {};
    option = null;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },

        xAxis: {
            type: 'time',



            axisLabel: {
                                formatter: function (value) {
                                    return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
                                }
                            }

        },
        yAxis: {
            type: 'value',
            min: 'dataMin'
        },
        dataZoom: [
            {
                type: 'slider',
                xAxisIndex: 0,
                filterMode: 'filter'
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                filterMode: 'empty'
            },
            {
                type: 'inside',
                xAxisIndex: 0,
                filterMode: 'filter'
            },
            {
                type: 'inside',
                yAxisIndex: 0,
                filterMode: 'empty'
            }
        ],
        series: [{

            data:  [["2018-11-06 11:27:54",37.2],["2018-11-06 11:29:33",37.2],["2018-11-06 11:29:34",37.3],["2018-11-06 13:09:33",37.3],["2018-11-06 13:09:34",37.2],["2018-11-06 13:09:34",37.2],["2018-11-06 13:09:35",37.3],["2018-11-06 13:09:49",37.3],["2018-11-06 13:09:50",37]],


            type: 'line',
        //    step: 'end',
            //  smooth: true,
            sampling: 'average'
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


</body>
</html>

When I zoom, the connecting lines should also connect points outside the display area. Below you could see the expected behaviour, which I did with a paint programm.

What could I change in the options to change that behavour, or is it an issue in the Echarts Library?

Same problem. Did you solve it? – tnusraddinov Feb 21 '20 at 08:40 — tnusraddinov, Feb 21 '20 at 08:40

D Story · Answer 1 · 2020-04-27T18:26:28.053

See the official documentation at https://echarts.apache.org/en/option.html#dataZoom-slider.filterMode for dataZoom: [{type: 'slider', ...}] and https://echarts.apache.org/en/option.html#dataZoom-inside.filterMode for dataZoom: [{type: 'inside', ...}].

The issue has to do with how ECharts filters the data when you zoom in. By default, it ignores all of the values outside of the axis range when you zoom in. Setting filterMode: 'none' will prevent the data from being ignored, and the lines will extend to the edge of the graph based on the values outside of the axis range.

Echarts: Line dissapear when Zooming in

1 Answers1