/**
* @Author Sean
* @Date 2019/5/8
*/
<template>
    <h-view class="public-style" style="height: 100%">
        <h-content>
          <div class="chart-wrapper" style="background: #160213;">
            <div class="chart-type">仪表盘</div>
            <canvas id="dashboard"></canvas>
          </div>

          <div class="chart-wrapper">
            <div class="chart-type">圆内占比</div>
            <canvas id="circle"></canvas>
          </div>

          <div class="chart-wrapper" style="background: #141414">
            <div class="chart-type">带动画的柱状图</div>
            <canvas id="animationColumn"></canvas>
          </div>

        </h-content>
    </h-view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        created: function () {
        },
        mounted: function () {
          this.dashboard();//仪表盘
          this.circle();//圆内占比
          this.animationColumn();//带动画的柱状图
        },
        updated: function () {
        },
        destroyed: function () {
        },
        methods: {
          dashboard(){
            var Shape = F2.Shape;
            var data = [{
              pointer: '当前收益',
              value: 5,
              length: 2,
              y: 1.05
            }];
            //自定义绘制数据的的形状
            Shape.registerShape('point', 'dashBoard', {
              getPoints: function getPoints(cfg) {
                var x = cfg.x;
                var y = cfg.y;

                return [{
                  x: x,
                  y: y
                }, {
                  x: x,
                  y: 0.4
                }];
              },
              draw: function draw(cfg, container) {
                var point1 = cfg.points[0];
                var point2 = cfg.points[1];
                point1 = this.parsePoint(point1);
                point2 = this.parsePoint(point2);

                var line = container.addShape('Polyline', {
                  attrs: {
                    points: [point1, point2],
                    stroke: '#1890FF',
                    lineWidth: 2
                  }
                });

                var text = cfg.origin._origin.value.toString();
                var text1 = container.addShape('Text', {
                  attrs: {
                    text: text + '%',
                    x: cfg.center.x,
                    y: cfg.center.y,
                    fill: '#1890FF',
                    fontSize: 24,
                    textAlign: 'center',
                    textBaseline: 'bottom'
                  }
                });
                var text2 = container.addShape('Text', {
                  attrs: {
                    text: cfg.origin._origin.pointer,
                    x: cfg.center.x,
                    y: cfg.center.y,
                    fillStyle: '#ccc',
                    textAlign: 'center',
                    textBaseline: 'top'
                  }
                });

                return [line, text1, text2];
              }
            });

            var chart = new F2.Chart({
              id: 'dashboard',
              animate: false,
              pixelRatio: window.devicePixelRatio
            });
            chart.source(data, {
              value: {
                type: 'linear',
                min: 0,
                max: 15,
                ticks: [0, 5, 7.5, 10, 15],
                nice: false
              },
              length: {
                type: 'linear',
                min: 0,
                max: 10
              },
              y: {
                type: 'linear',
                min: 0,
                max: 1
              }
            });

            chart.coord('polar', {
              inner: 0,
              startAngle: -1.25 * Math.PI,
              endAngle: 0.25 * Math.PI
            });

            //配置value轴刻度线
            chart.axis('value', {
              tickLine: {
                strokeStyle: '#ccc',
                lineWidth: 2,
                length: -5
              },
              label: null,
              grid: null,
              line: null
            });

            chart.axis('y', false);

            //绘制仪表盘辅助元素
            chart.guide().arc({
              start: [0, 1.05],
              end: [4.8, 1.05],
              style: {
                strokeStyle: '#1890FF',
                lineWidth: 5,
                lineCap: 'round'
              }
            });
            chart.guide().arc({
              start: [5.2, 1.05],
              end: [9.8, 1.05],
              style: {
                strokeStyle: '#ccc',
                lineWidth: 5,
                lineCap: 'round'
              }
            });
            chart.guide().arc({
              start: [10.2, 1.05],
              end: [15, 1.05],
              style: {
                strokeStyle: '#ccc',
                lineWidth: 5,
                lineCap: 'round'
              }
            });
            chart.guide().arc({
              start: [0, 1.2],
              end: [15, 1.2],
              style: {
                strokeStyle: '#ccc',
                lineWidth: 1
              }
            });

            chart.guide().text({
              position: [-0.5, 1.3],
              content: '0.00%',
              style: {
                fillStyle: '#ccc',
                font: '18px Arial',
                textAlign: 'center'
              }
            });
            chart.guide().text({
              position: [7.5, 0.7],
              content: '7.50%',
              style: {
                fillStyle: '#ccc',
                font: '18px Arial',
                textAlign: 'center'
              }
            });
            chart.guide().text({
              position: [15.5, 1.3],
              content: '15.00%',
              style: {
                fillStyle: '#ccc',
                font: '18px Arial',
                textAlign: 'center'
              }
            });

            chart.point().position('value*y').size('length').color('#1890FF').shape('dashBoard');
            chart.render();
          },
          circle(){
            var _F = F2,
              Shape = _F.Shape,
              Util = _F.Util;

            var circleClip = void 0;

            // 自定义 shape，创建在圆形剪切区域的矩形
            Shape.registerShape('interval', 'circle-clip', {
              draw: function draw(cfg, container) {
                var points = this.parsePoints(cfg.points);
                var style = Util.mix({
                  fill: cfg.color
                }, cfg.style);

                // points 顺序
                // 1 --- 2
                // |     |
                // 0 --- 3
                var coord = this._coord; // 获取坐标系对象
                var coordHeight = coord.y.start - coord.y.end;
                var radius = coordHeight / 2;
                var center = {
                  x: (points[0].x + points[3].x) / 2,
                  y: (coord.y.start + coord.y.end) / 2
                }; // 剪切圆的圆心， x 应该是对应柱子的中间点，y 是对应坐标系的纵轴中心点
                var rectHeight = Math.abs(points[2].y - points[3].y);
                var rectStart = {
                  x: center.x - radius,
                  y: points[1].y
                };
                // 创建矩形
                var rect = container.addShape('rect', {
                  className: 'interval',
                  attrs: Util.mix({
                    x: rectStart.x,
                    y: rectStart.y,
                    width: radius * 2,
                    height: rectHeight
                  }, style)
                });

                // 在 canvas 上创建剪切圆
                if (!circleClip) {
                  var canvas = container.get('canvas');
                  circleClip = canvas.addShape('circle', {
                    zIndex: 10,
                    attrs: {
                      x: center.x,
                      y: center.y,
                      r: radius,
                      lineWidth: 2,
                      stroke: '#ccc'
                    }
                  });
                }

                rect.attr('clip', circleClip);

                return rect;
              }
            });

            // 开始绘制图表
            var data = [{
              type: 'a',
              value: 25
            }];

            var chart = new F2.Chart({
              id: 'circle',
              pixelRatio: window.devicePixelRatio
            });
            chart.source(data, {
              value: {
                max: 100 // 设置 value 的最大值
              }
            });
            chart.axis(false);
            chart.tooltip(false);
            chart.interval().position('type*value').shape('circle-clip').animate({
              appear: { // 为了使动画效果更好，自定义动画，使用矩形的高度变化
                duration: 1000, // 动画的执行时间
                animation: function animation(shape, animateCfg) {
                  var height = shape.attr('height');
                  var y = shape.attr('y');
                  shape.attr('height', 0);
                  shape.attr('y', y + height);
                  shape.animate().to(Util.mix({
                    attrs: {
                      height: height,
                      y: y
                    }
                  }, animateCfg));
                }
              }
            });
            chart.render();

            setTimeout(function() {
              // 更新数据
              chart.changeData([{
                type: 'a',
                value: 64
              }]);
            }, 3500);
          },
          animationColumn(){
            var Chart = F2.Chart;
            var Animate = F2.Animate;
            var Util = F2.Util;
            var G = F2.G;
            Animate.registerAnimation('delayScaleInY', function(shape, animateCfg) {
              var box = shape.getBBox();
              var origin = shape.get('origin');
              var points = origin.points; // 获取柱子顶点
              var centerX = (box.minX + box.maxX) / 2;
              var centerY;
              if (points[0].y - points[1].y <= 0) {
                // 当顶点在零点之下
                centerY = box.maxY;
              } else {
                centerY = box.minY;
              }

              shape.transform([['t', centerX, centerY], ['s', 1, 0.1], ['t', -centerX, -centerY]]);
              var index = shape.get('index');
              var delay = animateCfg.delay;
              if (Util.isFunction(delay)) {
                delay = animateCfg.delay(index);
              }
              var easing = animateCfg.easing;

              var matrix = shape.getMatrix();
              var endMatrix = G.Matrix.transform(matrix, [['t', centerX, centerY], ['s', 1, 10], ['t', -centerX, -centerY]]);

              shape.animate().to({
                attrs: {
                  matrix: endMatrix
                },
                delay: delay,
                easing: easing,
                duration: animateCfg.duration
              });
            });

            var data = [];
            for (var i = 0; i < 50; i++) {
              data.push({
                x: i,
                y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5
              });
            }
            var chart = new Chart({
              id: 'animationColumn',
              pixelRatio: window.devicePixelRatio
            });
            chart.axis('x', false);
            chart.legend(false);
            chart.source(data);
            chart.interval().position('x*y').color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055').animate({
              appear: {
                animation: 'delayScaleInY',
                easing: 'elasticOut',
                delay: function delay(index) {
                  return index * 10;
                }
              }
            });
            chart.render();
          },
        }
    }
</script>

<style scoped lang="less" rel="stylesheet">
    .public-style {
        .content {
          .chart-wrapper{
            .chart-type{
              width: 100%;
              height: 30px;
              font-size: 16px;
              color: #7b7b7b;
              display: flex;
              display: -webkit-flex;
              justify-content: center;
              -webkit-justify-content: center;
              align-items: center;
              -webkit-align-items: center;
            }
            canvas{
              width:100%;
              height:100%;
            }
          }
        }
    }
</style>
