fix: fix the error when pie chart data difference is very large. Closed

#514

src/graphic/shape/sector.js

@@ -31,10 +31,13 @@ class Sector extends Shape {
 
     context.moveTo(unitX * r0 + x, unitY * r0 + y);
     context.lineTo(unitX * r + x, unitY * r + y);
-    context.arc(x, y, r, startAngle, endAngle, clockwise);
-    context.lineTo(Math.cos(endAngle) * r0 + x, Math.sin(endAngle) * r0 + y);
-    if (r0 !== 0) {
-      context.arc(x, y, r0, endAngle, startAngle, !clockwise);
+
+    if (endAngle - startAngle > 0.0001) { // 当扇形的角度非常小的时候，就不进行弧线的绘制
+      context.arc(x, y, r, startAngle, endAngle, clockwise);
+      context.lineTo(Math.cos(endAngle) * r0 + x, Math.sin(endAngle) * r0 + y);
+      if (r0 !== 0) {
+        context.arc(x, y, r0, endAngle, startAngle, !clockwise);
+      }
     }
     context.closePath();
   }

test/bug/issue-514-spec.js

@@ -0,0 +1,61 @@
+const expect = require('chai').expect;
+const F2 = require('../../src/core');
+require('../../src/geom/interval');
+require('../../src/coord/polar');
+require('../../src/geom/adjust/stack');
+
+describe('Issue 514', () => {
+  let canvas;
+  let chart;
+  before(() => {
+    canvas = document.createElement('canvas');
+    canvas.width = 300;
+    canvas.height = 300;
+    canvas.id = 'issue514';
+    canvas.style.position = 'fixed';
+    canvas.style.top = 0;
+    canvas.style.left = 0;
+    document.body.appendChild(canvas);
+  });
+
+  it('Issue 514', () => {
+    const data = [
+      { amount: 10000000000, title: '货币基金', amountDesc: '10000000000.00元' },
+      { amount: 100999999, title: '定期', amountDesc: '100999999.00元' },
+      { amount: 100, title: '短期理财', amountDesc: '100.00元' },
+      { amount: 100, title: '余额宝', amountDesc: '100.00元' }
+    ];
+    chart = new F2.Chart({
+      id: 'issue514',
+      width: 300,
+      height: 300,
+      pixelRatio: window.devicePixelRatio
+    });
+    chart.source(data);
+    chart.axis(false);
+    chart.coord('polar', { // 极坐标
+      transposed: true,
+      innerRadius: 0.5,
+      radius: 0.85
+    });
+
+    chart.interval()
+      .position('a*amount')
+      .color('title')
+      .adjust('stack'); // 层叠
+
+    chart.render();
+
+    // 通过判断像素点的颜色进行测试
+    const pixelData = canvas.getContext('2d').getImageData(248, 171, 1, 1).data;
+
+    expect(pixelData[0]).to.equal(24); // r
+    expect(pixelData[1]).to.equal(144); // g
+    expect(pixelData[2]).to.equal(255); // b
+  });
+
+  after(() => {
+    chart.destroy();
+    document.body.removeChild(canvas);
+  });
+});