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 爲每個圖例項的文本值
          }
        })