mirror of https://github.com/chillzhuang/Sword
109 lines
2.4 KiB
JavaScript
109 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
|
|
import autoHeight from '../autoHeight';
|
|
import styles from '../index.less';
|
|
|
|
@autoHeight()
|
|
class MiniArea extends React.PureComponent {
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MiniArea;
|