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 ( { return `

${title}

${data[0].value * 10}%

`; }} /> ); } }