import React, { Component } from 'react'; import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape } from 'bizcharts'; import DataSet from '@antv/data-set'; const { DataView } = DataSet; const { Text, Html, Arc, Line } = Guide; 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 - 20, stroke: cfg.color, lineWidth: 5, lineCap: 'round' } }); return group.addShape('circle', { attrs: { x: center.x, y: center.y, r: 12, stroke: cfg.color, lineWidth: 4.5, fill: '#fff' } }); } }); const data = [ { value: 6 } ]; const cols = { 'value': { min: 0, max: 9, ticks: [ 2.25, 3.75, 5.25, 6.75 ], nice: false } } export default class Basic extends Component { render() { return ( { if (val === '2.25') { return '差'; } else if (val === '3.75') { return '中'; } else if (val === '5.25') { return '良'; } return '优'; }, textStyle: { fontSize: 24, fill: 'rgba(0, 0, 0, 0.65)', textAlign: 'center' } }} /> {return ('

合格率

'+ data[0].value * 10+'%

')}} /> ); } }