可视化项目区域设计1

最新推荐文章于 2023-08-08 10:30:48 发布

小新没蜡笔m

最新推荐文章于 2023-08-08 10:30:48 发布

阅读量108

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_66506641/article/details/127027579

版权

概览区

        <!-- 概览区域模块制作 -->
        <div class="panel overview">
          <div class="inner">
            <ul>
              <li>
                <h4>2,190</h4>
                <span>
                  <i class="icon-dot" style="color: #006cff"></i>
                  设备总数
                </span>
              </li>
              <li class="item">
                <h4>190</h4>
                <span>
                  <i class="icon-dot" style="color: #6acca3"></i>
                  季度新增
                </span>
              </li>
              <li>
                <h4>3,001</h4>
                <span>
                  <i class="icon-dot" style="color: #6acca3"></i>
                  运营设备
                </span>
              </li>
              <li>
                <h4>108</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  异常设备
                </span>
              </li>
            </ul>
          </div>
        </div>

css样式

/* 概览区域模块制作 */
.overview {
    height: 1.375rem;
}

.overview ul {
    display: flex;
    /*水平布局*/
    justify-content: space-between;
    /*平均分配*/
}

.overview ul li h4 {
    font-size: 0.35rem;
    color: #fff;
    margin: 0 0 0.1rem 0.06rem;
}

.overview ul li span {
    font-size: 0.2rem;
    color: #4c9bfd;
}

监控区域

        <!-- 监控区域模块制作 -->
        <div class="panel monitor">//大盒子
          <div class="inner">
            <div class="tabs">
              //显示一个可切换
              <a href="javascript:;" class="active">故障设备监控</a>
              <a href="javascript:;">异常设备监控</a>
            </div>
            <div class="content" style="display: block;">
              <div class="head">
                <span class="col">故障时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20180701</span>
                    <span class="col">11北京市昌平西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                    <span class="icon-dot"></span>
                  </div>         
                </div>
              </div>
            </div>
            <div class="content">
              <div class="head">
                <span class="col">异常时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                    <span class="icon-dot"></span>
                  </div>                                
                </div>
              </div>
            </div>
          </div>
        </div>

切换功能

绑定标签页点击事件
当前容器加active其他容器移除active
index对应的内容容器显示其他容器隐藏

(function() {
  $(".monitor .tabs").on("click", "a", function() {
    $(this)
      .addClass("active")
      .siblings("a")
      .removeClass("active");
    // console.log($(this).index());
    //   选取对应索引号的content  tab栏实现切换 
    $(".monitor .content")
      .eq($(this).index())
      .show()
      .siblings(".content")
      .hide();
  });

实现无缝滚动

1.先克隆marquee里面所有的行（row）

2.通过css3动画滚动marquee

3.鼠标经过marquee就停止动画：animation-play-state：paused

css样式

/* 监控区域模块制作 */

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 15s linear infinite;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}

JS代码



  // 1. 先克隆marquee里面所有的行（row）
  $(".marquee-view .marquee").each(function() {
    // console.log($(this));
    var rows = $(this)
      .children()
      .clone();
    $(this).append(rows);
  });
})();

点位区域(point)

熟悉参数含义

option = {
    // 提示框组件
    tooltip: {
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      // 格式化提示内容：
      // a 代表series系列图表名称  
      // b 代表series数据名称 data 里面的name    
      // c 代表series数据值 data 里面的value   
      // d代表  当前数据/总数据的比例
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 控制图表
    series: [
      {
        // 图表名称
        name: '点位统计',
        // 图表类型
        type: 'pie',
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50%  距离图表DOM容器
        center: ['50%', '50%'],
        // radius 半径模式，另外一种是 area 面积模式
        roseType: 'radius',
        // 数据集 value 数据的值 name 数据的名称
        data: [
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
                {value:20, name:'rose5'},
                {value:35, name:'rose6'},
                {value:30, name:'rose7'},
                {value:40, name:'rose8'}
            ]
        }
    ]
};

label 对象设置

series: [
      {
        name: "面积模式",
        type: "pie",
        radius: [30, 110],
        center: ["50%", "50%"],
        roseType: "radius",
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
       // 文字调整
        label:{
         fontSize: 10
       },
       // 引导线调整
        labelLine: {
       // 连接扇形图线长
        length: 6,
       // 连接文字线长
        length2: 8
        } 
      }
    ],
  };

图表跟着自动适配

// 监听浏览器缩放，图表对象调用缩放resize函数
window.addEventListener("resize", function() {
    myChart.resize();
  });

完整JS代码

// 点位分布统计模块
(function() {
  // 1. 实例化对象
  var myChart = echarts.init(document.querySelector(".pie"));
  // 2. 指定配置项和数据
  var option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    // 注意颜色写的位置
    color: [
      "#006cff",
      "#60cda0",
      "#ed8884",
      "#ff9f7f",
      "#0096ff",
      "#9fe6b8",
      "#32c5e9",
      "#1d9dff"
    ],
    series: [
      {
        name: "点位统计",
        type: "pie",
        // 如果radius是百分比则必须加引号
        radius: ["10%", "70%"],
        center: ["50%", "50%"],
        roseType: "radius",
        data: [
          { value: 20, name: "云南" },
          { value: 26, name: "北京" },
          { value: 24, name: "山东" },
          { value: 25, name: "河北" },
          { value: 20, name: "江苏" },
          { value: 25, name: "浙江" },
          { value: 30, name: "四川" },
          { value: 42, name: "湖北" }
        ],
        // 修饰饼形图文字相关的样式 label对象
        label: {
          fontSize: 10
        },
        // 修饰引导线样式
        labelLine: {
          // 连接到图形的线长度
          length: 6,
          // 连接到文字的线长度
          length2: 8
        }
      }
    ]
  };

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option);
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    myChart.resize();
  });
})();