g6js实现多条地铁运行示意图动画图表效果代码-html代码-BFW代码库

g6js实现多条地铁运行示意图动画图表效果代码

代码语言：html

所属分类：图表

代码描述：g6js实现多条地铁运行示意图动画图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
  
<style>
canvas{
  background: rgb(0, 0, 0);
  background-image: url("//repo.bfw.wiki/bfwrepo/json/A_G23iRqkiibIAAAAAAAAAAABkARQnAQ.png");
  /* background-repeat: no-repeat; */
  background-size: 600px 600px;
}
.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}
</style>


</head>
<body>
  <div id="mountNode"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/antv.g6-3.1.0.js"></script>
  
      <script>
const colors = [
  "rgb(64, 174, 247)",
  "rgb(108, 207, 169)",
  "rgb(157, 223, 125)",
  "rgb(240, 198, 74)",
  "rgb(221, 158, 97)",
  "rgb(141, 163, 112)",
  "rgb(115, 136, 220)",
  "rgb(133, 88, 219)",
  "rgb(203, 135, 226)",
  "rgb(227, 137, 163)"
];
// custom the node
G6.registerNode(
  "breath-node",
  {
    afterDraw(cfg, group) {
      const r = cfg.size / 2;
      const haloColor = cfg.color || (cfg.style && cfg.style.fill);
      const back1 = group.addShape("circle", {
        zIndex: -2,
        attrs: {
          x: 0,
          y: 0,
          r,
          fill: haloColor,
          opacity: 0.6
        }
      });
      const back2 = group.addShape("circle", {
        zIndex: -1,
        attrs: {
          x: 0,
          y: 0,
          r,
          fill: haloColor,
          opacity: 0.6
        }
      });
      group.sort(); // 排序，根据zIndex 排序
      const delayBase = Math.random() * 2000;
      back1.animate(
        {
          // 逐渐放大，并消失
          r: r + 10,
          opacity: 0.0,
          repeat: true // 循环
        },
        3000,
        "easeCubic",
        null,
        delayBase
      ); // 无延迟
      back2.animate(
        {
          // 逐渐放大，并消失
          r: r + 10,
          opacity: 0.0,
          repeat: true // 循环
        },
        3000,
        "easeCubic",
        null,
        delayBase + 1000
      ); // 1 秒延迟
    }
  },
  "circle"
);

// custom the edge
G6.registerEdge(
  "running-polyline",
  {
    afterDraw(cfg, group) {
      const shape = group.get("children")[0];
      const length = shape.getTotalLength();
      const startPoint = shape.getPoint(0);
      let circleCount = Math.ceil(length / 20);
      circleCount = circleCount === 0 ? 1 : circleCount;
      for (let i = 0; i < circleCount; i++) {
        const delay = Math.random() * 1000;
        const start = shape.getPoint(i / circleCount);
        const circle = group.addShape("circle", {
          attrs: {
            x: start.x,
            y: start.y,
            r: 0.8,
            fill: "#A0F3AF",
            shadowColor: "#fff",
            shadowBlur: 30
          }
        });
        circle.animate(
          {
            onFrame(r.........完整代码请登录后点击上方下载按钮下载查看