问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

【求助】这样的图表如何实现

头像
z_sir
    416
    新手上路，请多包涵

    看到别人网站的图表，元素类名以及源码都有echarts迹象
    但是在官网示例和Gallery社区均未发现相似效果示例，求大佬帮忙看看如何实现

    echarts前端javascript图表antv
    阅读 1.6k
    1 个回答
    得票最新
    头像
    2j06z6vq
      865
      ✓ 已被采纳
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100%;
      height: 100%;
      background: #000;
    }
    .cri1{
      width: 500px;
      height: 500px;
      border-radius: 50%;
      position: relative;
      left: 20%;
      top: 20%;
      border: 1px solid #fff;
      animation: rotate 10s linear infinite;
    }
    .ge{
      position: absolute;
      color: #fff;
      animation: Vrotate 10s linear infinite;
    }
    .ge1{
      top: 75%;
      right: -10%;
    }
    .ge2{
      top: -10%;
      left: 50%;
    }
    .ge3{
      top: 75%;
      left: -10%;
    }
    .ge4{
      top: 25%;
      left: -20%;
    }
    .ge5{
      top: 25%;
      right: -20%;
    }
    .ge6{
      bottom: -20%;
      left: 50%;
    }
    .ge7{
      top: -60%;
      left: 30%;
    }
    .ge8{
      top: 75%;
      left: -60%;
    }
    .ge9{
      top: 75%;
      right: -60%;
    }
    .cri2{
      width: 300px;
      height: 300px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border: 1px solid #fff;
    }
    .cri3{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border: 1px solid #fff;
    }
    .ge:hover{
      cursor: pointer;
    }
    @keyframes rotate {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
    @keyframes Vrotate {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(-360deg);}
    }
    .active{
      animation-play-state: running;
    }
    .paused{
      animation-play-state: paused;
    }
    .layer{
      position: absolute;
      top: -100px;
      left: -100px;
      opacity: 0;
      right: -100px;
      width: 100px;
      background: #fff;
      color: #000;
      transition: 0.5s;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="cri1 cri">
      <div class="ge1 ge">特殊用户</div>
      <div class="ge2 ge">特殊用户</div>
      <div class="ge3 ge">特殊用户</div>
      <div class="cri2">
        <div class="ge4 ge">特殊用户</div>
        <div class="ge5 ge">特殊用户</div>
        <div class="ge6 ge">特殊用户</div>
        <div class="cri3">
          <div class="ge7 ge">特殊用户</div>
          <div class="ge8 ge">特殊用户</div>
          <div class="ge9 ge">特殊用户</div>
        </div>
      </div>
    </div>
  </div>
  <div class="layer">11111111</div>
</body>
<script>
  window.onload = function(){
    let ge = document.getElementsByClassName("ge");
    let cri = document.getElementsByClassName("cri1")[0];
    let layer = document.getElementsByClassName("layer")[0];
    for(let i = 0; i < ge.length; i++){
      ge[i].onmouseover = function (e) {
        layer.style.top = e.pageY+ 10 + "px";
        layer.style.left = e.pageX+ 10 + "px";
        layer.style.opacity = 1;
        console.log(e.pageX,e.pageY)
        paused();
      }
      ge[i].onmouseout = function(e) {
        layer.style.opacity = 0;
        active();
      }
    }
    function paused(){
      for(let j = 0; j < ge.length; j++){
        ge[j].classList.remove('active');
        ge[j].classList.add('paused');
      }
      cri.classList.remove('active');
      cri.classList.add('paused');
    }
    function active(){
      for(let j = 0; j < ge.length; j++){
        ge[j].classList.remove('paused');
        ge[j].classList.add('active');
      }
      cri.classList.remove('paused');
      cri.classList.add('active');
    }
  }
</script>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题