效果

双轨迹旋转Chart

实现思路

因工作关系，首先想到使用TWaver的矢量图定制，这样可以减少很多工作量，当然使用Canvas也可以实现同样的效果。
记得以前写过一个流动线条攻击效果，用来表示网络安全态势攻击，echart也有相应实现，效果如图：

流动攻击效果

记得当时的思路是，用一次绘制很多个小圈圈，通过渐变，透明度等设置，来模拟轨迹的效果。然而这种方法的致命缺点就是效率问题。

function FlowLink() {
    FlowLink.superClass.constructor.apply(this, arguments);
  }

  twaver.Util.ext(FlowLink, twaver.Link, {
    getVectorUIClass: function() {
      return FlowLinkUI;
    },
    playAnimate: function(dur) {
      this.animate.play();
    },
    setAnimate: function(dur) {
      var dur = dur || 1200;
      var self = this;
      var fNode, tNode;

      fNode = self.getFromNode();
      tNode = self.getToNode();

      this.animate = new twaver.Animate({
        from: 0,
        to: 1,
        repeat: Number.POSITIVE_INFINITY,
        // repeat: 2,
        reverse: false,
        dur: dur,
        onPlay: function() {

        },
        onUpdate: function(value) {
          self.setClient('percent', value);
          if (value >= 1) self.setClient('over', true);
          else self.setClient('over', false);
        },
        onDone: function() {

        }
      });
    }
  });

  function FlowLinkUI() {
    FlowLinkUI.superClass.constructor.apply(this, arguments);
  }

  twaver.Util.ext(FlowLinkUI, twaver.vector.LinkUI, {
    paintBody: function(ctx) {
      var link = this.getElement();
      if (link.getClient('over')) return;
      var fillColor = link.getClient('fillColor');
      var shadowColor = link.getClient('shadowColor');
      var tail = link.getClient('tail');
      var percent = link.getClient('percent');
      var paths = this.getLinkPoints();
      var offset = this.getLineLength() * percent;
      var tailFactor = link.getClient('tailFactor') || 1.5;
      var tailRadius = link.getClient('tailRadius') || 2;
      var point;
      var fromPoint = this._element.getFromAgent().getCenterLocation();
      var toPoint = this._element.getToAgent().getCenterLocation();
      var point = _twaver.math.calculatePointInfoAlongLine(paths, true, offset, 0).point;
      var points = new twaver.List();

      points.add(fromPoint);
      points.add(point);

      if (link.getClient('controlPointX')) {
        var controlPoint = {
          x: link.getClient('controlPointX'),
          y: link.getClient('controlPointY')
        };
        var c1 = {
          x: (fromPoint.x + controlPoint.x) / 2,
          y: (fromPoint.y + controlPoint.y) / 2
        };
        var c2 = {
          x: (toPoint.x + controlPoint.x) / 2,
          y: (toPoint.y + controlPoint.y) / 2
        };
        var c3 = {
          x: (c1.x + c2.x) / 2,
          y: (c1.y + c2.y) / 2
        };
        points.add(c1);
        points.add(c2);
        points.add(c3);
        // points.add(controlPoint);
      }
      var rect = _twaver.math.getRect(points);

      if (fromPoint.x < toPoint.x) {
        ctx.rect(rect.x, rect.y, Math.abs(point.x - fromPoint.x) + 1.5, rect.height);
      } else {
        ctx.rect(point.x - 1.5, rect.y, Math.abs(point.x - fromPoint.x), rect.height);
      }
      ctx.clip();
      FlowLinkUI.superClass.paintBody.call(this, ctx);

      for (var i = 0, count = tail; i < count; i++) {
        var v = i / count;
        point = _twaver.math.calculatePointInfoAlongLine(paths, true, offset - (count - i) *
          tailFactor, 0).point;
        ctx.globalAlpha = v * v;
        ctx.shadowBlur = 10;
        ctx.shadowColor = shadowColor;
        ctx.beginPath();
        ctx.fillStyle = fillColor;
        ctx.arc(point.x, point.y, tailRadius, 0, Math.PI * 2, false);
        ctx.fill();
      }
      for (var i = 0, count = tail; i < count; i++) {
        var v = i / count;
        point = _twaver.math.calculatePointInfoAlongLine(paths, true, offset - (count - i) * 1,
          0).point;
        ctx.globalAlpha = v * v;
        ctx.shadowBlur = 1;
        ctx.shadowColor = shadowColor;
        ctx.beginPath();
        ctx.fillStyle = 'white';
        ctx.arc(point.x, point.y, 1, 0, Math.PI * 2, false);
        ctx.fill();
      }
    }
  });

点击查看效果
使用globalCompositeOperation方法

var canvas = this.canvas,
            g = this.g,
            gradient = this.gradient,
            gradient2 = this.gradient2,
            diameter = Math.floor(data.getWidth() * view.getZoom()),
            radius = diameter / 2,
            hueStart = 120,
            hueEnd = 170,
            hueDiff = Math.abs(hueEnd - hueStart),
            width = diameter,
            height = diameter;
          if (!canvas) {
            this.canvas = canvas = document.createElement('canvas');
          }

          if (width !== canvas.width || height !== canvas.height) {
            canvas.width = diameter;
            canvas.height = diameter;
            this.g = g = canvas.getContext('2d');
            this.gradient = gradient = g.createLinearGradient(radius, 0, 0, 0);
            gradient.addColorStop(0, 'hsla(' + hueStart + ', ' + 50 + '%, ' + 40 + '%, 1.0)');
            gradient.addColorStop(1, 'hsla(' + hueEnd + ', ' + 50 + '%, ' + 40 + '%, 0.1)');

            this.gradient2 = gradient2 = g.createLinearGradient(-radius, 0, 0, 0);
            gradient2.addColorStop(0, 'hsla(' + hueStart + ', ' + 50 + '%, ' + 40 + '%, 1.0)');
            gradient2.addColorStop(1, 'hsla(' + hueEnd + ', ' + 50 + '%, ' + 40 + '%, 0.1)');
          }

          g.globalCompositeOperation = 'destination-out'; //'destination-out';
          g.fillStyle = 'hsla(0, 0%, 0%, 0.1)';
          g.fillRect(0, 0, width, height);

          g.globalCompositeOperation = 'lighter';
          var i;
          for (i = 2; i < 3; i++) {
            g.beginPath();
            g.arc(radius, radius, ((radius - 1) / 4) * (i + 1), 0, Math.PI * 2, false);
            g.strokeStyle = 'hsla(' + (hueEnd - (i * (hueDiff / 4))) + ', ' + 50 + '%, ' + 40 + '%, 0.1)';
            g.lineWidth = 2;
            g.stroke();
          };

          g.beginPath();
          g.save();
          g.translate(radius, radius);
          g.rotate(data.getClient('angle'));
          g.arc(((radius - 1) / 4) * (2.5 + 1), 0, 4, 0, Math.PI * 2, false);
          g.fillStyle = gradient;
          g.fill();
          g.restore();

          g.beginPath();
          g.save();
          g.translate(radius, radius);
          g.rotate(data.getClient('angle'));
          g.arc(-((radius - 1) / 4) * (2.5 + 1), 0, 4, 0, Math.PI * 2, false);
          g.fillStyle = gradient2;
          g.fill();
          g.restore();

          ctx.scale(1 / view.getZoom(), 1 / view.getZoom());
          ctx.drawImage(canvas, -width / 2, -height / 2);
          stats.end();

点击查看效果