Lines and mark areas disappear during zooming

问题简述 (One-line summary)

During zooming ECharts does not paint lines to chart boundaries if the target point is outside of the visible coordinate range. Mark areas however are painted to chart boundaries. But mark areas also disappear if both start and end coordinates of the mark area are outside the visible coordinate range.

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version): 3.2.0 / master branch
• 浏览器类型和版本 (Browser version): all
• 操作系统类型和版本 (OS Version): all

重现步骤 (Steps to reproduce)

1. Open https://jsfiddle.net/wy0v5yqv/ or used options posted below
2. Move left handle of zoom slider slightly to the right and left most line part will disappear (bad), but left most mark area still visible (good)
3. Move right handle of zoom slider slightly to the left and right most line part will disappear (bad), but right most mark area still visible (good)
4. Move right handle of zoom slider further to the right and remaining line part will disappear once its target point is out of zoom range (bad). Moving the handle even further to the right until the zoomed/visible range crosses the right edge of the left most mark area causes the left most mark area to disappear as well. Now you have an empty chart (bad).

期望结果 (Expected behaviour)

Lines and mark areas should be painted even if their points are outside of the zoomed area. If you don’t want that all the time, at least make it configurable.

可能哪里有问题 (What went wrong)

See “Steps to reproduce” above.

ECharts配置项 (ECharts option)

option = {
    legend: {
        data:['issue']
    },
    dataZoom: [
      { type: 'slider', show: true },
      { type: 'inside', show: true }
    ],
    xAxis: {
      type: 'time',
    },
    yAxis: {
      type: 'value',
      max: 50
    },
    series: [
      {
        name:'issue',
        type:'line',
        data:[
          {name : "2016-01-01", value: ["2016-01-01 00:00:00", 5]},
          {name : "2016-01-02", value: ["2016-01-02 00:00:00", 15]},
          {name : "2016-01-03", value: ["2016-01-03 00:00:00", 25]},
          {name : "2016-01-03", value: ["2016-01-05 00:00:00", 15]},
        ],
            markArea: {
                silent: true,
                data: [
                    [
                        { coord: ["2016-01-01 00:00:00", 5] }, 
                        { coord: ["2016-01-01 23:59:59", 15] }
                    ],
                    [
                        { coord: ["2016-01-02 00:00:00", 10] }, 
                        { coord: ["2016-01-02 23:59:59", 20] }
                    ],
                    [
                        { coord: ["2016-01-03 00:00:00", 15] }, 
                        { coord: ["2016-01-03 23:59:59", 35] }
                    ]
                ]
            },
        }
    ]
}

其他信息 (Other comments)

https://jsfiddle.net/wy0v5yqv/

[ryantunis]

Adding filterMode: none doesn’t resolve this problem for me. The mark line still disappears when zooming in.

Echarts Version: 4.6.0

Data Zoom Settings:

    /**
     * Get's the data zoom mode.
     */
    getDataZoom(): any[] {
      return [{
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'none'
      }, {
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'none',
      }, {
        type: 'inside',
        xAxisIndex: [0],
        filterMode: 'none'
      }, {
        type: 'inside',
        yAxisIndex: [0],
        filterMode: 'none'
      }];
    }

Line Series Object with MarkLine:

   /**
   * Create's horizontal line series object.
   */
  createHorizontalLineSeries(
    name: string,
    formatterLabel: string,
    color: string,
    xMin: number,
    xMax: number,
    y: number
  ) {
    return {
      name: name,
      type: 'line',
      markLine: {
        lineStyle: {color: color},
        data: [
          [
            // start point of the line
            // we have to defined line attributes only here (not in the end point)
            {
              xAxis: xMin,
              yAxis: y,
              symbol: 'none',
              label: {
                show: true,
                position: 'end',
                emphasis: {
                  show: true,
                  formatter: formatterLabel
                }

              }
            },
            // end point of the line
            {
              xAxis: xMax,
              yAxis: y,
              symbol: 'none'
            }
          ]
        ]
      }
    } as EChartOption.SeriesLine;
  },

[iozbek]

filtermode: 'none' resolves the problem.