text: import React from 'react';
  import {Chart, Axis, Tooltip, Geom} from 'bizcharts';
  import autoHeight from '../autoHeight';
  import styles from '../index.less';
  
  @autoHeight()
  export default class MiniArea extends React.Component {
    render() {
      const {
        height,
        data = [],
        forceFit = true,
        color = 'rgba(24, 144, 255, 0.2)',
        borderColor = '#1089ff',
        scale = {},
        borderWidth = 2,
        line,
        xAxis,
        yAxis,
        animate = true,
      } = this.props;
  
      const padding = [36, 5, 30, 5];
  
      const scaleProps = {
        x: {
          type: 'cat',
          range: [0, 1],
          ...scale.x,
        },
        y: {
          min: 0,
          ...scale.y,
        },
      };
  
      const tooltip = [
        'x*y',
        (x, y) => ({
          name: x,
          value: y,
        }),
      ];
  
      const chartHeight = height + 54;
  
      return (
        <div className={styles.miniChart} style={{height}}>
          <div className={styles.chartContent}>
            {height > 0 && (
              <Chart
                animate={animate}
                scale={scaleProps}
                height={chartHeight}
                forceFit={forceFit}
                data={data}
                padding={padding}
              >
                <Axis
                  key="axis-x"
                  name="x"
                  label={false}
                  line={false}
                  tickLine={false}
                  grid={false}
                  {...xAxis}
                />
                <Axis
                  key="axis-y"
                  name="y"
                  label={false}
                  line={false}
                  tickLine={false}
                  grid={false}
                  {...yAxis}
                />
                <Tooltip showTitle={false} crosshairs={false}/>
                <Geom
                  type="area"
                  position="x*y"
                  color={color}
                  tooltip={tooltip}
                  shape="smooth"
                  style={{
                    fillOpacity: 1,
                  }}
                />
                {line ? (
                  <Geom
                    type="line"
                    position="x*y"
                    shape="smooth"
                    color={borderColor}
                    size={borderWidth}
                    tooltip={false}
                  />
                ) : (
                  <span style={{display: 'none'}}/>
                )}
              </Chart>
            )}
          </div>
        </div>
      );
    }
  }
  