• 数据可视化之大屏模板和自适应放大缩小方法

    废话不多说直接上根据屏幕视口大小自动缩放的实现方法

    方法一

    通过js获取窗口宽高进行缩放建议配合vh，vw食用

    然后里面的echarts图表通过监听窗口变化实现自适应

    pieChart1为你初始化的图表

    1. window.onresize = function () {
    2.         pieChart1.resize();
    3.       };

    效果图

     模板代码

    css

    1.  body {
    2.         margin: 0;
    3.       }
    4.  
    5.       .box {
    6.         background: url(./img/bg.png) center center / cover;
    7.         transform-origin: left top;
    8.         position: relative;
    9.       }
    10.  
    11.       .header {
    12.         height: 80px;
    13.       }
    14.  
    15.       .header h2 {
    16.         text-align: center;
    17.         color: #fff;
    18.         font-size: 30px;
    19.         font-weight: normal;
    20.         margin: 0;
    21.         line-height: 80px;
    22.       }
    23.  
    24.       .main {
    25.         height: calc(100vh - 80px);
    26.  
    27.         position: relative;
    28.         /* top: 80px; */
    29.         left: 0;
    30.         bottom: 0;
    31.         right: 0;
    32.         display: flex;
    33.       }
    34.  
    35.       .lt {
    36.         position: absolute;
    37.         left: 0;
    38.         top: 0;
    39.       }
    40.  
    41.       .rt {
    42.         position: absolute;
    43.         right: 0;
    44.         top: 0;
    45.         transform: rotateY(180deg);
    46.       }
    47.  
    48.       .lb {
    49.         position: absolute;
    50.         bottom: 0;
    51.         left: 0;
    52.         transform: rotateX(180deg);
    53.       }
    54.  
    55.       .rb {
    56.         position: absolute;
    57.         bottom: 0;
    58.         right: 0;
    59.         transform: rotateX(180deg) rotateY(180deg);
    60.       }
    61.  
    62.       .left-container {
    63.         width: 22%;
    64.         position: relative;
    65.         border: 5px solid #fff;
    66.         margin: 20px;
    67.       }
    68.  
    69.       .right-container {
    70.         width: 78%;
    71.         margin: 20px;
    72.         display: flex;
    73.         flex-direction: column;
    74.         margin-left: 0;
    75.       }
    76.  
    77.       .right-bottom-container {
    78.         height: 35%;
    79.         margin-top: 20px;
    80.         border: 5px solid #fff;
    81.       }
    82.  
    83.       .right-top-container {
    84.         height: 65%;
    85.         display: flex;
    86.       }
    87.  
    88.       .right-top-left-container {
    89.         border: 5px solid #fff;
    90.         width: 65%;
    91.         margin-right: 20px;
    92.       }
    93.  
    94.       .right-top-right-container {
    95.         width: 35%;
    96.         display: flex;
    97.         flex-direction: column;
    98.       }
    99.  
    100.       .right-top-right-top-container {
    101.         border: 5px solid #fff;
    102.         height: 50%;
    103.         margin-bottom: 10px;
    104.       }
    105.  
    106.       .right-top-right-bottom-container {
    107.         border: 5px solid #fff;
    108.         height: 50%;
    109.         margin-top: 10px;
    110.       }
    111.  
    112.       .pie-1 {
    113.         width: 100%;
    114.         height: 30%;
    115.       }
    116.       .pie-2 {
    117.         width: 100%;
    118.         height: 100%;
    119.       }

    html

    1.  <div class="box">
    2.       <div class="header">
    3.         <h2>机电设备电子档案h2>
    4.       div>
    5.       <div class="main">
    6.         <svg class="lt" width="150" height="150">
    7.           <polygon
    8.             fill="#4fd2dd"
    9.             points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
    10.           >
    11.             <animate
    12.               attributeName="fill"
    13.               values="#4fd2dd;#235fa7;#4fd2dd"
    14.               dur="0.5s"
    15.               begin="0s"
    16.               repeatCount="indefinite"
    17.             >animate>
    18.           polygon>
    19.           <polygon
    20.             fill="#235fa7"
    21.             points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
    22.           >
    23.             <animate
    24.               attributeName="fill"
    25.               values="#235fa7;#4fd2dd;#235fa7"
    26.               dur="0.5s"
    27.               begin="0s"
    28.               repeatCount="indefinite"
    29.             >animate>
    30.           polygon>
    31.           <polygon
    32.             fill="#4fd2dd"
    33.             points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
    34.           >
    35.             <animate
    36.               attributeName="fill"
    37.               values="#4fd2dd;#235fa7;transparent"
    38.               dur="1s"
    39.               begin="0s"
    40.               repeatCount="indefinite"
    41.             >animate>
    42.           polygon>
    43.         svg>
    44.         <svg class="rt" width="150" height="150">
    45.           <polygon
    46.             fill="#4fd2dd"
    47.             points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
    48.           >
    49.             <animate
    50.               attributeName="fill"
    51.               values="#4fd2dd;#235fa7;#4fd2dd"
    52.               dur="0.5s"
    53.               begin="0s"
    54.               repeatCount="indefinite"
    55.             >animate>
    56.           polygon>
    57.           <polygon
    58.             fill="#235fa7"
    59.             points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
    60.           >
    61.             <animate
    62.               attributeName="fill"
    63.               values="#235fa7;#4fd2dd;#235fa7"
    64.               dur="0.5s"
    65.               begin="0s"
    66.               repeatCount="indefinite"
    67.             >animate>
    68.           polygon>
    69.           <polygon
    70.             fill="#4fd2dd"
    71.             points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
    72.           >
    73.             <animate
    74.               attributeName="fill"
    75.               values="#4fd2dd;#235fa7;transparent"
    76.               dur="1s"
    77.               begin="0s"
    78.               repeatCount="indefinite"
    79.             >animate>
    80.           polygon>
    81.         svg>
    82.         <svg class="rb" width="150" height="150">
    83.           <polygon
    84.             fill="#4fd2dd"
    85.             points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
    86.           >
    87.             <animate
    88.               attributeName="fill"
    89.               values="#4fd2dd;#235fa7;#4fd2dd"
    90.               dur="0.5s"
    91.               begin="0s"
    92.               repeatCount="indefinite"
    93.             >animate>
    94.           polygon>
    95.           <polygon
    96.             fill="#235fa7"
    97.             points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
    98.           >
    99.             <animate
    100.               attributeName="fill"
    101.               values="#235fa7;#4fd2dd;#235fa7"
    102.               dur="0.5s"
    103.               begin="0s"
    104.               repeatCount="indefinite"
    105.             >animate>
    106.           polygon>
    107.           <polygon
    108.             fill="#4fd2dd"
    109.             points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
    110.           >
    111.             <animate
    112.               attributeName="fill"
    113.               values="#4fd2dd;#235fa7;transparent"
    114.               dur="1s"
    115.               begin="0s"
    116.               repeatCount="indefinite"
    117.             >animate>
    118.           polygon>
    119.         svg>
    120.         <svg class="lb" width="150" height="150">
    121.           <polygon
    122.             fill="#4fd2dd"
    123.             points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
    124.           >
    125.             <animate
    126.               attributeName="fill"
    127.               values="#4fd2dd;#235fa7;#4fd2dd"
    128.               dur="0.5s"
    129.               begin="0s"
    130.               repeatCount="indefinite"
    131.             >animate>
    132.           polygon>
    133.           <polygon
    134.             fill="#235fa7"
    135.             points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
    136.           >
    137.             <animate
    138.               attributeName="fill"
    139.               values="#235fa7;#4fd2dd;#235fa7"
    140.               dur="0.5s"
    141.               begin="0s"
    142.               repeatCount="indefinite"
    143.             >animate>
    144.           polygon>
    145.           <polygon
    146.             fill="#4fd2dd"
    147.             points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
    148.           >
    149.             <animate
    150.               attributeName="fill"
    151.               values="#4fd2dd;#235fa7;transparent"
    152.               dur="1s"
    153.               begin="0s"
    154.               repeatCount="indefinite"
    155.             >animate>
    156.           polygon>
    157.         svg>
    158.  
    159.         <div class="left-container">
    160.           <div class="pie-1">div>
    161.         div>
    162.         <div class="right-container">
    163.           <div class="right-top-container">
    164.             <div class="right-top-left-container">
    165.               <div class="pie-2">div>
    166.             div>
    167.             <div class="right-top-right-container">
    168.               <div class="right-top-right-top-container">div>
    169.               <div class="right-top-right-bottom-container">div>
    170.             div>
    171.           div>
    172.           <div class="right-bottom-container">div>
    173.         div>
    174.       div>
    175.     div>

    js

    1.       // 第一个饼图
    2.       let pieChart1 = echarts.init(document.querySelector(".pie-1"));
    3.       let pieChart1Option = {
    4.         color: ["#469f4b", "#00baff", "#3de7c9", "#ffffff", "#ffc530"],
    5.         tooltip: {
    6.           trigger: "item",
    7.         },
    8.  
    9.         series: [
    10.           {
    11.             type: "pie",
    12.             label: {
    13.               color: "#fff",
    14.               formatter: "{d}%\n{b}",
    15.             },
    16.             tooltip: {
    17.               show: false,
    18.             },
    19.             emphasis: {
    20.               disabled: true,
    21.             },
    22.             radius: ["30%", "40%"],
    23.             data: [
    24.               { value: 1048, name: "其他" },
    25.               { value: 735, name: "收费系统" },
    26.               { value: 580, name: "通信系统" },
    27.               { value: 484, name: "监控系统" },
    28.               { value: 300, name: "供配电系统" },
    29.             ],
    30.           },
    31.         ],
    32.       };
    33.       pieChart1.setOption(pieChart1Option);
    34.       window.onresize = function () {
    35.         pieChart1.resize();
    36.       };

    bg图

    相信到了这里剩下的图表数据啊排版啥的就不用我多说了吧，直接按部就班开发就好，有收获就点个关注吧

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

    csdn文章推荐受影响解决办法10个字10行

  • 相关阅读:
    Python基础if...else条件判断
    【开源】SpringBoot框架开发人事管理系统
    Python常见面试题006 类方法、类实例方法、静态方法有何区别？
    海豚调度器集群安装DolphinScheduler(3.1.8)
    副业教程之如何通过出售API赚取美元含数据集和训练教程
    Windows安装配置Apache简易服务器-----（详细，成功率极高）
    【Ty CLI】一个开箱即用的前端脚手架
    一种视频防抖的车辆检测算法
    C#（JS）几个常用的正则表达式
    Python请问在哪儿找资源比较好呀?
  • 原文地址：https://blog.csdn.net/qq_45547094/article/details/126758278