import { Axis, Chart, Coord, Geom, Guide, Shape } from 'bizcharts'; import React from 'react'; import autoHeight from '../autoHeight'; const { Arc, Html, Line } = Guide; export interface IGaugeProps { title: React.ReactNode; color?: string; height?: number; bgColor?: number; percent: number; forceFit?: boolean; style?: React.CSSProperties; formatter: (value: string) => string; } const defaultFormatter = (val: string): string => { switch (val) { case '2': return '差'; case '4': return '中'; case '6': return '良'; case '8': return '优'; default: return ''; } }; Shape.registerShape!('point', 'pointer', { drawShape(cfg: any, group: any) { let point = cfg.points[0]; point = (this as any).parsePoint(point); const center = (this as any).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', }, }); }, }); class Gauge extends React.Component { render() { const { title, height = 1, 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 renderHtml = () => `

${title}

${(data[0].value * 10).toFixed(2)}%

`; const data = [{ value: percent / 10 }]; const textStyle: { fontSize: number; fill: string; textAlign: 'center'; } = { fontSize: 12, fill: 'rgba(0, 0, 0, 0.65)', textAlign: 'center', }; return ( ); } } export default autoHeight()(Gauge);