123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- 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()
- export default 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={() => {
- return `
- <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>
- );
- }
- }
|