Echarts：放大时线条消失答案

【问题标题】：Echarts: Line dissapear when Zooming inEcharts：放大时线条消失
【发布时间】：2018-11-07 10:14:53
【问题描述】：

我尝试在 echarts 4.1.0 版中编写折线图。我正在使用不同的浏览器，例如 Chrome 版本 69.0.3497.100 或 Firefox 63.0.1（64 位）。我的问题是，如果我缩放 x 轴，如果点在焦点之外，连接线就会消失：

这就是我在这个例子中的代码：

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

当我缩放时，连接线也应该连接显示区域之外的点。您可以在下面看到预期的行为，这是我使用绘图程序所做的。

我可以在选项中更改哪些内容以更改该行为，或者这是 Echarts 库中的问题？

【问题讨论】：

同样的问题。你解决了吗？

标签： javascript html echarts

【解决方案1】：

dataZoom: [{type: 'slider', ...}] 和 https://echarts.apache.org/en/option.html#dataZoom-inside.filterModedataZoom: [{type: 'inside', ...}] 的官方文档见https://echarts.apache.org/en/option.html#dataZoom-slider.filterMode。

问题与ECharts在放大时如何过滤数据有关。默认情况下，它会在放大时忽略所有超出轴范围的值。设置filterMode: 'none'将防止数据被忽略，并且线条将根据轴范围之外的值延伸到图形的边缘。

【讨论】：