首页 前端知识 2023-01-04 Echarts学习笔记(三) Echarts的实际应用场景:在网页中插入Echarts的折线图,饼状图和柱状图

2023-01-04 Echarts学习笔记(三) Echarts的实际应用场景:在网页中插入Echarts的折线图,饼状图和柱状图

2024-04-12 20:04:07 前端知识 前端哥 496 445 我要收藏

文章目录

      • 零.准备和说明
        • 1.最终页面效果
        • 2.资源地址
      • 一.网页布局
        • 1.网页结构分析
        • 2.其他准备
        • 3.完整代码
          • index.html
          • css/index.scss
        • 4.效果
        • 5.知识点
          • 5.1.伪类选择器:after 选择器,:before和content属性
            • 示例
            • counter-increment函数
          • 5.2.z-index属性
            • 示例:图片设置 z-index: -1, 会显示在文字之后
          • 5.3.动画animate和关键帧@keyframe
            • 示例
            • animation的属性值:动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态 动画执行顺序;
      • 二.插入Echarts图表
        • 1.引入css文件和js文件后的index.html
        • 2.在index.js写左右两边各三个echarts图表和中间的地图
          • 步骤
          • 2.1.网页左侧的第一个echarts柱状图
            • 代码
            • 效果
          • 2.2.网页右侧的第一个echarts柱状图
            • 代码
            • 效果
          • 2.3.网页左侧的第二个echarts折线图
            • 代码
            • 效果
          • 2.4.网页右侧的第二个echarts折线图
            • 代码
            • 效果
          • 2.5.网页左侧的第三个echarts饼图
            • 代码
            • 效果
          • 2.6.网页右侧的第三个echarts饼图
            • 代码
            • 效果
          • 2.7.页面中间的地图模块
            • 代码
            • 效果

零.准备和说明

1.最终页面效果

在这里插入图片描述
主要分为两个部分,一是先进行常规页面布局,然后给图中的Echarts图表预留位置,即做成公共样式,二是在预留位置插入Echarts图表即可

2.资源地址

项目素材:https://gitee.com/xiaoqiang001/eckarts_open_class.git
视频地址:https://www.bilibili.com/video/BV1v7411R7mp

一.网页布局

1.网页结构分析

这个网页分为头部部分(header)和页面主体部分(mainbox),
其中,头部部分右边的时间是通过伪元素选择器::after设置一个定位属性放在右侧

页面主体分为左边盒子,中间盒子和右边盒子(三个column)
其中,左边盒子和右边盒子的可以共用样式,最后分别插入三个不同的图表即可

中间盒子又可以分为上面的数据部分(no)和下面的地图部分(map)

数据部分又可以分为上侧的数字部分(no-hd),数字的文字样式这里引入了iconfont的文字格式,以及下侧的文字部分(no-bd)

地图部分要求引入动画效果,即通过背景图片的旋转来完成动画效果,最后给后续要插入的地图预留位置

2.其他准备
  • 需要先引入相关图片放进images文件夹,引入字体样式放进font文件夹
  • 引入flexible.js,把屏幕分为 24 等份
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  • 在vsCode应用商店下载cssrem插件,可以在设置px值的过程中自动转换成rem值,然后在设置中搜索cssrem,把其root的font-size从16px改成80px
  • 四个角的样式是通过一个个宽高10px小盒子只显示两个边框实现的,详见
    https://blog.csdn.net/rowlet/article/details/123317033
3.完整代码
index.html
<!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>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <h1>可视化展板Echarts</h1>
        <div class="showTime"></div>
    </header>
    <!-- 页面主体部分 -->
    <section class="mainbox">
        <!-- 页面主体:左边部分 -->
        <div class="column">
            <!-- 公共样式面板panel:复制若干份panel -->
            <!-- 重命名为bar:柱状图 -->
            <div class="panel bar ">
                <h2>柱形图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
            <!-- 重命名为line:折线图 -->
            <div class="panel line">
                <h2>折线图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
            <!-- 重命名为pie:饼状图 -->
            <div class="panel">
                <h2>饼状图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <!-- 页面主体:中间部分(记得设置margin值) -->
        <div class="column">
            <!-- 上面的数字部分 -->
            <div class="no">
                <!-- 数字模块 -->
                <div class="no-hd">
                    <ul>
                        <li>125811</li>
                        <li>101363</li>
                    </ul>
                </div>
                <!-- 文字模块 -->
                <div class="no-bd">
                    <ul>
                        <li>前端需求人数</li>
                        <li>市场供应人数</li>
                    </ul>
                </div>
            </div>
            <!-- 下面的地图部分 -->
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart"></div>
            </div>
        </div>
        <!-- 页面主体:右边部分(跟左边部分完全一样) -->

        <div class="column">
            <!-- 公共样式面板panel:复制若干份panel -->
            <!-- 重命名为bar:柱状图 -->
            <div class="panel bar ">
                <h2>柱形图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
            <!-- 重命名为line:折线图 -->
            <div class="panel line">
                <h2>折线图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
            <!-- 重命名为pie:饼状图 -->
            <div class="panel">
                <h2>饼状图-就业行业</h2>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
    <footer>

    </footer>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

</body>
<script>
    // header
    // 时间模块
    var t = null;
    t = setTimeout(timer, 1000);

    function timer() {
   
        clearTimeout(t);
        dt = new Date();
        var y = dt.getFullYear(),
            mt = dt.getMonth()   1,
            day = dt.getDate(),
            h = dt.getHours(),
            m = dt.getMinutes(),
            s = dt.getSeconds();;
        var showTime = document.querySelector(".showTime");
        showTime.innerHTML = `当前时间:${
     y}${
     mt}${
     day}${
     h}${
     m}${
     s}`
    }
</script>

</html>
css/index.scss
// 0.格式化初始样式
* {
   
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

li{
   
    list-style-type: none;
}
html {
   
  height: 100%;
}

body {
   
  line-height: 1.15rem;
  background: url(../images/bg.jpg) no-repeat top center;
}

/* 声明字体*/

@font-face {
   
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

// 1.头部
header {
   
  position: relative;
  height: 100px;
  background: url(../images/head_bg.png);
  background-size: 100% 100%;
  h1 {
   
      color: #fff;
      font-size: 38px;
      line-height: 80px;
      text-align: center;
  }
  .showTime {
   
      position: absolute;
      top: 0;
      right: .375rem;
      line-height: .9375rem;
      color: rgba(255, 255, 255, .7);
      font-size: .25rem;
  }
}

// 2.页面主体
.mainbox {
   
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: .125rem .125rem 0 .125rem;
  display: flex;
  .column {
   
      flex: 3;
      &:nth-child(2) {
   
          flex: 5;
          margin: 0 .125rem .1875rem;
          overflow: hidden;
      }
  }
}

// 公共样式panel
.panel {
   
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 136, .17);
  background-image: url("../images/line\(1\).png");
  padding: 0 .0625rem .5rem .0625rem;
  margin-bottom:.1875rem;
  &::before {
   
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
  }
  &::after {
   
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
  }
  .panel-footer {
   
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
   
          position: absolute;
          bottom: 0;
          left: 0;
          width: 10px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
      }
      &::after {
   
          position: absolute;
          bottom: 0;
          right: 0;
          width: 10px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
      }
  }
  h2 {
   
      height: .6rem;
      color: #ffffff;
      font-size: .25rem;
      font-weight: 400;
      text-align: center;
      line-height: 0.6rem;
      a{
   
        color:#fff;
        text-decoration: none;
        margin:0 0.125rem;
      }
  }
  .chart {
   
      height: 3rem;
  }
}

// 设置中间的column的样式
// 1.设置上面no的样式:上边放数字(no-hd),下边放文字(no-bd)
.no {
   
  background: rgba(101, 132, 226, 0.1);
  padding: .1875rem;
  // 数字模块
  .no-hd {
   
      border: 1px solid rgba(25, 186, 139, 0.17);
      position: relative;
      &::before {
   
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 10px;
          border-left: 2px solid #02a6b5;
          border-top: 2px solid #02a6b5;
          content: "";
      }
      &::after {
   
          position: absolute;
          bottom: 0;
          right: 0;
          width: 30px;
          height: 10px;
          border-right: 2px solid #02a6b5;
          border-bottom: 2px solid #02a6b5;
          content: "";
      }
      ul {
   
          display: flex;
          li {
   
              position: relative;
              height: 1rem;
              font-size: .875rem;
              color: #ffeb7b;
              font-family: "electronicFont";
              flex: 1;
              text-align: center;
              &:nth-child(1)::after {
   
                  position: absolute;
                  height: 50%;
                  border: 1px solid rgba(255, 255, 255, 0.2);
                  top: 25%;
                  right: 0;
                  content: "";
              }
          }
      }
  }
  // 文字模块
  .no-bd {
   
      ul {
   
          display: flex;
          li {
   
              flex: 1;
              height: .5rem;
              font-size: .225rem;
              padding-top: .125rem;
              color: rgba(255, 255, 255, 0.7);
              text-align: center;
              line-height: .5rem;
          }
      }
  }
}

// 2.设置下面map的样式:套三层背景,做旋转动画
.map {
   
  height: 10.125rem;
  position: relative;
  .map1 {
   
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6.475rem;
      height: 6.475rem;
      background: url(../images/map.png) no-repeat;
      background-size: 100% 100%;
      opacity: .3;
  }
  .map2 {
   
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8.0375rem;
      height: 8.0375rem;
      background-image: url(../images/lbx.png);
      background-size: 100% 100%;
      opacity: .6;
      animation: rotate1 15s linear infinite;
      z-index: 2;
  }
  .map3 {
   
      position: absolute;
      top: 50%;
      left
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4790.html
评论
发布的文章

HTML5学习笔记(二)

2024-04-21 10:04:45

HTML5 新增语义标签及属性

2024-04-21 10:04:32

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!