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
      ); // 无延迟
.........完整代码请登录后点击上方下载按钮下载查看