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 } = 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: 5.6 } ]; const cols = { 'value': { min: 0, max: 9, tickInterval: 1, nice: false } } export default class Basic extends Component { render() { return ( {return ('

合格率

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

')}} /> ); } }