DataZoom Data Filtering Slider

DataZoom is a filtering slider component in the VChart chart library, which allows users to zoom and roam chart data more conveniently, improves data visibility, and enhances the interactivity of the chart. This tutorial mainly explains the related concepts and composition of DataZoom. For more detailed configuration and examples of DataZoom, please refer to the Configuration Documentation and Examples pages.

Composition

The DataZoom component mainly consists of the following parts:

• background Background
• selectedBackground Selected background
• startHandler Start handle
• endHandler End handle
• middleHandler Middle handle
  • icon Middle handle icon
  • background Middle handle background
• startText Start text
• endText End text
• background The background rectangle of the thumbnail axis
• backgroundChart Preview chart of the thumbnail axis, currently supports line charts and area charts
• selectedBackgroundChart Preview chart of the selected part of the thumbnail axis.
• dragMask Dragging track element of the thumbnail axis.

Example

In the following example, you can see a data filtering slider at the bottom of the chart. Users can zoom and roam the chart data by dragging the slider handles or selecting from the background layer.

In this example, we configure the data filtering slider through the dataZoom property. Here we mainly configure the thumbnail chart for the slider background layer and the chart style in the selected area:

• Background area chart: Configure with the backgroundChart object, including area chart (area) and line chart (line) styles. The fill color of the area chart is #D1DBEE, and the line width is 1; The stroke color of the line chart is #D1DBEE, and the width is 1.

• Selected area chart: Configure with the selectedBackgroundChart object, including area (area) and line chart (line) styles. The fill color of the area chart is #fbb934, and the line width is 1; The stroke color of the line chart is #fbb934, and the line width is 1.