釘釘自定義元件使用F2遇到的問題

阿新 • • 發佈：2021-01-30

技術標籤：小程式

小程式引入方式官網有教程，參考支付寶小程式引入。
遇到的問題如下：
1.圖表重新整理：
請求到資料給到圖表時，圖表未重新整理，使用：

Charts.changeData(data);//data為後端資料
Charts.repaint();//更新圖表
//兩個要一起用才行

2.餅圖中PieLabel引入報錯，最終引入如下：

 const PieLabel = require('@antv/f2/lib/plugin/pie-label');
 F2.Chart.plugins.register([ PieLabel ]);//引入 PieLabel

3.餅圖內放文字，這個官網有放icon的例子，我們需求中要求加上資料，其實官網程式碼只看懂了部分，我作了部分改動，也算實現了需求。樣式如下：

以下是部分程式碼：

       function _getEndPoint(center, angle, r) {
          return {
            x: center.x + r * Math.cos(angle),
            y: center.y + r * Math.sin(angle)
          };
        }

        var _F = F2,
          Shape = _F.Shape,
          Util = _F.Util,
          G = _F.G;
        var 
 Vector2 = G.Vector2;
        Shape.registerShape('interval', 'pie-with-icon', {
          draw: function draw(cfg, container) {
            var points = this.parsePoints(cfg.points);
            var style = Util.mix({
              fill: cfg.color
            }, cfg.style);
            var coord = this 
._coord;
            if (cfg.isInCircle && coord.transposed) {
              // 只處理極座標y
              var newPoints = [points[0], points[3], points[2], points[1]];

              var _cfg$center = cfg.center,
                x = _cfg$center.x,
                y = _cfg$center.y;

              var v = [1, 0];
              var v0 = [newPoints[0].x - x, newPoints[0].y - y];
              var v1 = [newPoints[1].x - x, newPoints[1].y - y];
              var v2 = [newPoints[2].x - x, newPoints[2].y - y];

              var startAngle = Vector2.angleTo(v, v1);
              var endAngle = Vector2.angleTo(v, v2);
              var r0 = Vector2.length(v0);
              var r = Vector2.length(v1);

              if (startAngle >= 1.5 * Math.PI) {
                startAngle = startAngle - 2 * Math.PI;
              }

              if (endAngle >= 1.5 * Math.PI) {
                endAngle = endAngle - 2 * Math.PI;
              }
              var middleAngle = (startAngle + endAngle) / 2;
              var numbricCenter = _getEndPoint(cfg.center, middleAngle, (r + r0) / 2);
              
            
              var sector = container.addShape('Sector', {
                className: 'interval',
                attrs: Util.mix({
                  x: x,
                  y: y,
                  r: r,
                  r0: r0,
                  startAngle: startAngle,
                  endAngle: endAngle
                }, style)
              });

                var text = container.addShape('text', {
                  attrs: {
                    x: numbricCenter.x,
                    y: numbricCenter.y,
                    textAlign: 'center',
                    textBaseline: 'middle',
                    fontSize: that.props.componentProps.upwardFont,
                    text:cfg.origin._origin.rate+'%', //這裡是要顯示的資料
                    fill: that.props.componentProps.upwardColor,
                    fontWeight: '400'
                  }
                });
              return [sector,text];
            }
               }
        });