Menu
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?
962
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.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
