G2实现南丁格尔图添加中心文字以及legend百分比

先看效果：

• 中心文字设置

this.chart.guide().html({
          position: ['50%', '50%'],
          html: `<div style="color:#fff;font-size: 25px;text-align: center;width: 10em;">${total}<br><div style="color:#fff;font-size:14px;text-align: center">总得分</div></div>`,
          alignX: 'middle',
          alignY: 'middle'
        })

chart.guide().html(cfg)
辅助 html。
chart.guide().html({
position: {object} | {function} | {array}, // html 的中心位置
htmlContent: {string}, // html 代码
alignX: {string}, // html 水平方向的布局，可取值为 ‘left’，‘middle’，‘right’
alignY: {string}, // html 垂直方向的布局，可取值为 ‘top’，‘middle’，‘bottom’
offsetX: {number},
offsetY: {number},
zIndex: {number}
});

• 百分比设置

//通过legend的itemFormatter参数进行格式化
this.chart.legend({
          marker: 'square',
          position: 'right-center',
          textStyle: { fill: '#a3a9c1', fontSize: '12' },
          itemFormatter(val) {
            let labe = data.find(v => v.title == val).population
            return `${val}
 ${parseInt(labe / sum * 100)}%` // val 为每个图例项的文本值
          }
        })