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

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

2024-04-12 20:04:07 前端知识 前端哥 535 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
标签
animationkeyframe
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！