What problem does this feature solve?

For series like maps, graphs, trees, sankeys, data shapes sometimes may be too large to displayed without overlap in a chart. Some charts supports roam (not sankey) but the user may not have an idea about the relationship between the current visible data and the overall data. Related issues include: #14061 #16926 #17214

Thumbnails are useful in these cases. For example, if we could provide a thumbnail like the design below, we can give users the intuitive about the overall shapes of the whole series and the current visible area.

What does the proposed API look like?

There are mainly two workflows to achieve this feature.

Plan A: Render in each rendering loop

In this method, in each rendering loop, the thumbnail component calls each series to render the thumbnail shapes after rendering the series itself.

Most probably, we don't have to render everything in a series. For example, for some series like graph or sankey, the labels may be ignored to save time or provide a cleaner preview, while other series like tree series should not ignore labels since the label lengths are probably informative in the thumbnails. Each series can decide which parts should be rendered in the thumbnail.

Plan B: Render when setOption is called

Since having accurate preview is not a must in the thumbnails, maybe they can be generated only when setOption is called.

With this approach, we don't have the thumbnail updated when elements are emphasized or selected. This should not be a big problem. But for draggable series, we may have to listen to drag events or provide a method to update the thumbnails for the users to call in drag events.

For forced graphs, it should be frequently updated until the calculation of position has been stopped.

API

The following options are added to map, graph, tree, sankey series:

zoomCenter: [number | string, number | string], // not sure if the current `center` does the same thing but it doesn't look like so
thumbnail: {
  show: boolean,
  top: number | string,
  bottom: number | string,
  left: number | string,
  right: number | string,
  width: number | string,
  height: number | string,
  borderColor: Color,
  backgroundColor: Color,
  overlayBackgroundColor: Color, // the thumbnail area minus the focus area
  selectedDataBackground: { // the focused area
    lineStyle: LineStyleProps,
    areaStyle: AreaStyleProps
  }
}

Example:

chart.setOption({
  series: [{
    type: 'map', // or 'graph', 'tree', 'sankey'
    roam: true, // new for sankey
    zoom: 2, // new for sankey
    zoomCenter: ['50%', '50%'],
    thumbnail: {
      show: true,
      right: 10,
      bottom: 10
    }
  }]
});

Optionally, if we wish to provide the user the ability to update the thumbnail:

chart.on('mouseover', () => chart.updateThumbnail({ seriesIndex: 0 }))