我尝试在 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 库中的一个问题？
最佳答案
见官方文档 https://echarts.apache.org/en/option.html#dataZoom-slider.filterMode对于 dataZoom: [{type: 'slider', ...}]和 https://echarts.apache.org/en/option.html#dataZoom-inside.filterMode对于 dataZoom: [{type: 'inside', ...}] .
这个问题与 ECharts 在放大时如何过滤数据有关。默认情况下，它会在放大时忽略轴范围之外的所有值。设置 filterMode: 'none'将防止数据被忽略，并且线条将根据轴范围之外的值延伸到图形的边缘。
关于javascript - Echarts:放大时线条消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53187396/