当前位置：文江博客话题详情

JavaScript 图表 ECharts Antv 前端

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

发布于 2022-09-13 00:57:58 字数 123 浏览 29 评论 0

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

溺深海 2022-09-20 00:57:58

<!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>

~没有更多了~

关于作者

死开点丶别碍眼

暂无简介

0 文章

0 评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文