bizcharts 折线图缩放案例
    https://www.bizcharts.net/product/bizcharts/demo/22

    1. import React, { useEffect } from 'react';
    2. import PropTypes from 'prop-types';
    3. import { Empty } from 'antd';
    4. import { Axis, Chart, Geom, Tooltip, Legend } from 'bizcharts';
    5. import Brush from '@antv/g2-brush';
    7. LineChartZoom.propTypes = {
    8.   height: PropTypes.number,
    9.   padding: PropTypes.array,
    10.   custom: PropTypes.bool,
    11.   loading: PropTypes.bool,
    12.   dataSource: PropTypes.array.isRequired,
    13. };
    14. LineChartZoom.defaultProps = {
    15.   height: 460,
    16.   padding: [20, 56, 50, 56],
    17.   custom: false,
    18.   loading: false,
    19. };
    21. let chart;
    23. function LineChartZoom(props) {
    24.   const { height, padding, custom, dataSource } = props;
    25.   if (!dataSource.length) return <Empty />;
    27.   useEffect(() => {
    28.     new Brush({
    29.       canvas: chart.get('canvas'),
    30.       style: {
    31.         fill: '#ccc',
    32.         fillOpacity: 0.4,
    33.       },
    34.       chart,
    35.     });
    36.     // 双击清除过滤，恢复初始状态
    37.     chart.on('plotdblclick', () => {
    38.       chart.get('options').filters = {};
    39.       chart.repaint();
    40.     });
    41.   }, []);
    43.   const scale = {
    44.     value: {
    45.       alias: '值',
    46.       tickCount: 5,
    47.       min: 0,
    48.     },
    49.     date: {
    50.       type: 'timeCat',
    51.       mask: 'YYYY-MM-DD HH:mm',
    52.       tickCount: custom ? 8 : 12,
    53.       nice: false,
    54.     },
    55.   };
    57.   const label = {
    58.     formatter(text) {
    59.       return custom ? text : text.slice(-5);
    60.     },
    61.     textStyle: {
    62.       textAlign: 'center',
    63.       fontSize: '12',
    64.     },
    65.   };
    67.   const attr = {
    68.     data: dataSource,
    69.     scale,
    70.     height,
    71.     padding,
    72.     forceFit: true,
    73.     onGetG2Instance: g2Chart => {
    74.       g2Chart.animate(false);
    75.       chart = g2Chart;
    76.     },
    77.   };
    79.   return (
    80.     <Chart {...attr}>
    81.       <Axis name='date' label={label} />
    82.       <Axis name='value' />
    83.       <Tooltip crosshairs={false}/>
    84.       <Legend />
    86.       <Geom type='line' position='date*value' size={2} shape='smooth' />
    87.     </Chart>
    88.   );
    89. }
    91. export default LineChartZoom;
    1. <LineChartZoom dataSource={chartData} />