mirror of https://github.com/chillzhuang/Sword
168 lines
3.8 KiB
JavaScript
168 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
|
|
import autoHeight from '../autoHeight';
|
|
|
|
const { Arc, Html, Line } = Guide;
|
|
|
|
const defaultFormatter = val => {
|
|
switch (val) {
|
|
case '2':
|
|
return '差';
|
|
case '4':
|
|
return '中';
|
|
case '6':
|
|
return '良';
|
|
case '8':
|
|
return '优';
|
|
default:
|
|
return '';
|
|
}
|
|
};
|
|
|
|
Shape.registerShape('point', 'pointer', {
|
|
drawShape(cfg, group) {
|
|
let point = cfg.points[0];
|
|
point = this.parsePoint(point);
|
|
const center = this.parsePoint({
|
|
x: 0,
|
|
y: 0,
|
|
});
|
|
group.addShape('line', {
|
|
attrs: {
|
|
x1: center.x,
|
|
y1: center.y,
|
|
x2: point.x,
|
|
y2: point.y,
|
|
stroke: cfg.color,
|
|
lineWidth: 2,
|
|
lineCap: 'round',
|
|
},
|
|
});
|
|
return group.addShape('circle', {
|
|
attrs: {
|
|
x: center.x,
|
|
y: center.y,
|
|
r: 6,
|
|
stroke: cfg.color,
|
|
lineWidth: 3,
|
|
fill: '#fff',
|
|
},
|
|
});
|
|
},
|
|
});
|
|
|
|
@autoHeight()
|
|
class Gauge extends React.Component {
|
|
render() {
|
|
const {
|
|
title,
|
|
height,
|
|
percent,
|
|
forceFit = true,
|
|
formatter = defaultFormatter,
|
|
color = '#2F9CFF',
|
|
bgColor = '#F0F2F5',
|
|
} = this.props;
|
|
const cols = {
|
|
value: {
|
|
type: 'linear',
|
|
min: 0,
|
|
max: 10,
|
|
tickCount: 6,
|
|
nice: true,
|
|
},
|
|
};
|
|
const data = [{ value: percent / 10 }];
|
|
return (
|
|
<Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
|
|
<Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
|
|
<Axis name="1" line={null} />
|
|
<Axis
|
|
line={null}
|
|
tickLine={null}
|
|
subTickLine={null}
|
|
name="value"
|
|
zIndex={2}
|
|
gird={null}
|
|
label={{
|
|
offset: -12,
|
|
formatter,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
fill: 'rgba(0, 0, 0, 0.65)',
|
|
textAlign: 'center',
|
|
},
|
|
}}
|
|
/>
|
|
<Guide>
|
|
<Line
|
|
start={[3, 0.905]}
|
|
end={[3, 0.85]}
|
|
lineStyle={{
|
|
stroke: color,
|
|
lineDash: null,
|
|
lineWidth: 2,
|
|
}}
|
|
/>
|
|
<Line
|
|
start={[5, 0.905]}
|
|
end={[5, 0.85]}
|
|
lineStyle={{
|
|
stroke: color,
|
|
lineDash: null,
|
|
lineWidth: 3,
|
|
}}
|
|
/>
|
|
<Line
|
|
start={[7, 0.905]}
|
|
end={[7, 0.85]}
|
|
lineStyle={{
|
|
stroke: color,
|
|
lineDash: null,
|
|
lineWidth: 3,
|
|
}}
|
|
/>
|
|
<Arc
|
|
zIndex={0}
|
|
start={[0, 0.965]}
|
|
end={[10, 0.965]}
|
|
style={{
|
|
stroke: bgColor,
|
|
lineWidth: 10,
|
|
}}
|
|
/>
|
|
<Arc
|
|
zIndex={1}
|
|
start={[0, 0.965]}
|
|
end={[data[0].value, 0.965]}
|
|
style={{
|
|
stroke: color,
|
|
lineWidth: 10,
|
|
}}
|
|
/>
|
|
<Html
|
|
position={['50%', '95%']}
|
|
html={() => `
|
|
<div style="width: 300px;text-align: center;font-size: 12px!important;">
|
|
<p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
|
|
<p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
|
|
${data[0].value * 10}%
|
|
</p>
|
|
</div>`}
|
|
/>
|
|
</Guide>
|
|
<Geom
|
|
line={false}
|
|
type="point"
|
|
position="value*1"
|
|
shape="pointer"
|
|
color={color}
|
|
active={false}
|
|
/>
|
|
</Chart>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Gauge;
|