feat: 环比 statistic.htmlContent 回调参数补充 size，容器宽度设置 (#1250)

* feat: 环比 statistic.htmlContent 回调参数补充 size，容器宽度设置

* test: 加长等待，保证测试通过

Author: simaQ

__tests__/bugs/donut-statistic-spec.ts

@@ -38,7 +38,9 @@ describe('Statistics scale format', () => {
     ];
 
     const donutPlot = new Donut(canvasDiv, {
-      forceFit: true,
+      forceFit: false,
+      width: 400,
+      height: 400,
       title: {
         visible: true,
         text: '环图',
@@ -59,9 +61,9 @@ describe('Statistics scale format', () => {
       colorField: 'type',
       animation: false,
       statistic: {
-        htmlContent: (data) => {
+        htmlContent: (data, size) => {
           const { name, value, color } = data;
-          return `<div>
+          return `<div class="statistic" style="width: ${size}px; text-align: center">
             <h3 class="ring-guide-name" style="color: ${color}">${name}</h3>
             <p class="ring-guide-value">${value}</p>
             </div>`;
@@ -72,5 +74,7 @@ describe('Statistics scale format', () => {
     // @ts-ignore
     expect(donutPlot.getLayers()[0].labelComponent.arcPoints[0].name).toBe('-27-');
     expect(canvasDiv.getElementsByClassName('ring-guide-value')[0].textContent).toBe('-100-');
+    // @ts-ignore
+    expect(canvasDiv.getElementsByClassName('statistic')[0].style.width).toBe('153.088px');
   });
 });

__tests__/bugs/issue-1137-spec.ts

@@ -40,7 +40,7 @@ describe('#1137', () => {
   }, 1000);
 
   it('test', async () => {
-    await wait(1500);
+    await wait(2000);
     const view = plot.getView();
     const label = plot.getLayer().getLabels()[0];
     const geometry = view.geometries[0];

src/plots/donut/component/ring-statistic.ts

@@ -63,7 +63,7 @@ export default class RingStatistic extends StatisticHtml {
     /** 中心文本显示 */
     let htmlString;
     if (this.options.htmlContent) {
-      htmlString = this.options.htmlContent(displayData);
+      htmlString = this.options.htmlContent(displayData, this.getStatisticSize());
     } else {
       htmlString = this.getStatisticTemplate(displayData);
     }
@@ -133,7 +133,7 @@ export default class RingStatistic extends StatisticHtml {
     const htmlContent = this.options.htmlContent;
     let htmlString: string;
     if (htmlContent) {
-      htmlString = htmlContent(data);
+      htmlString = htmlContent(data, this.getStatisticSize());
     } else {
       htmlString = this.getStatisticTemplate(data);
     }