fix(#2195): fix autoFit 不生效

src/chart/chart.ts

@@ -53,12 +53,12 @@ export default class Chart extends View {
     ele.appendChild(wrapperElement);
 
     // if autoFit, use the container size, to avoid the graph render twice.
-    const size = getChartSize(wrapperElement, autoFit, width, height);
+    const size = getChartSize(ele, autoFit, width, height);
 
     const G = getEngine(renderer);
 
     const canvas = new G.Canvas({
-      container: wrapperElement,
+      container: ele,
       pixelRatio,
       localRefresh,
       ...size,
@@ -79,7 +79,7 @@ export default class Chart extends View {
       theme,
     });
 
-    this.ele = wrapperElement;
+    this.ele = ele;
     this.canvas = canvas;
     this.width = size.width;
     this.height = size.height;

src/util/dom.ts

@@ -7,8 +7,12 @@ import { Size } from '../interface';
  * @returns the element width and height
  */
 function getElementSize(ele: HTMLElement): Size {
-  const { width, height } = ele.getBoundingClientRect();
-  return { width, height };
+  const style = getComputedStyle(ele);
+
+  return {
+    width: (ele.clientWidth || parseInt(style.width)) - parseInt(style.paddingLeft) - parseInt(style.paddingRight),
+    height: (ele.clientHeight || parseInt(style.height)) - parseInt(style.paddingTop) - parseInt(style.paddingBottom),
+  }
 }
 
 /**

tests/bugs/2195-spec.ts

@@ -0,0 +1,47 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('#2195', () => {
+  it('autoFit should eql container', () => {
+    const div = createDiv();
+    div.style.height = '400px';
+
+    const data = [
+      { year: '1991', value: 3 },
+      { year: '1992', value: 4 },
+    ];
+    const chart = new Chart({
+      container: div,
+      autoFit: true,
+      height: 200,
+    });
+
+    chart.data(data);
+    chart.point().position('year*value');
+
+    chart.render();
+    expect(chart.height).toBe(400);
+  });
+
+  it('chart size should ignore padding', () => {
+    const div = createDiv();
+    div.style.height = '400px';
+    div.style.padding = '50px';
+
+    const data = [
+      { year: '1991', value: 3 },
+      { year: '1992', value: 4 },
+    ];
+    const chart = new Chart({
+      container: div,
+      autoFit: true,
+      height: 100,
+    });
+
+    chart.data(data);
+    chart.point().position('year*value');
+
+    chart.render();
+    expect(chart.height).toBe(400);
+  });
+});

tests/unit/chart/chart-auto-fit-spec.ts

@@ -21,7 +21,7 @@ describe('Chart autoFit', () => {
     .adjust('stack');
 
   test('autoFit', () => {
-    expect(chart.ele).toBe(div.querySelector('div'));
+    expect(chart.ele).toBe(div);
 
     const { width, height } = chart.ele.getBoundingClientRect();