https://bizcharts.alibaba-inc.com/product/bizcharts/demo/22

    g2-brush数据下钻折线图
    image.png

    1. let chart;
    3. const scale = {
    4.   value: {
    5.     alias: '值',
    6.     tickCount: 5,
    7.     min: 0,
    8.   },
    9.   date: {
    10.     type: 'timeCat',
    11.     mask: 'YYYY-MM-DD HH:mm',
    12.     tickCount: 8,
    13.     nice: false,
    14.   },
    15. };
    17. function App() {
    18.     useEffect(init, []);
    20.   function init() {
    21.       new Brush({
    22.       chart,
    23.         canvas: chart.get('canvas');
    24.       style: {
    25.             fill: '#ccc',
    26.           fillOpacity: 0.3,
    27.         },
    28.       type: 'X',
    29.       onBrushstart() {
    30.             chart.hideTooltip();
    31.         },
    32.       onBrushmove() {
    33.             chart.hideTooltip();
    34.         },
    35.       onBrushend(e) {
    36.             const view = chart.get('view');
    37.         const {data} = e;
    38.         view[1].filterShape(obj => {
    39.             return data.indexOf(obj) > -1;
    40.         });
    41.         }
    42.     });
    44.       // 双击图表，恢复初始状态
    45.     chart.on('plotdbclick', () => {
    46.         chart.get('options').filters = {};
    47.       chart.repaint();
    48.     })
    49.   }
    50. }
    52. function onReset() {
    53.     chart.get('options').filters = {};
    54.   chart.repaint();
    55. }
    57. const attrs = {
    58.     data: dataSource,
    59.   scale,
    60.   height,
    61.   padding,
    62.   forceFit: true,
    63.   onGetInstance: g2Chart => {
    64.       g2Chart.animate(false);
    65.     chart = g2Chart;
    66.   }
    67. }
    69. return (
    70.     <Chart {...attrs}>
    71.     <Axis name='date' label={label} />
    72.     <Axis name='value' />
    73.     // 隐藏竖线
    74.     <Tooltip crosshairs={false}/>
    75.     <Legend />
    77.     <Geom
    78.       type='line'
    79.       position='date*value'
    80.       size={2}
    81.       shape='smooth'
    82.       color='type'
    83.       />
    84.   </Chart>
    85. )

    g2-brush

    1. function init() {
    2.   new Brush({
    3.     canvas: chart.get('canvas'),
    4.     chart,
    5.     type: 'X',
    6.     onBrushstart() {
    7.       chart.hideTooltip()
    8.     },
    9.     onBrushmove() {
    10.       chart.hideTooltip()
    11.     },
    12.   })
    14.   // 双击清除过滤，恢复初始状态
    15.   chart.on('plotdblclick', () => {
    16.     chart.get('options').filters = {}
    17.     chart.repaint()
    18.   })
    19. }