锐单电子商城 ， 一站式电子元器件采购平台！

  • 电话：400-990-0325

购物车

前端基础第二天项目 大数据大屏可视化项目

时间：2022-08-18 23:30:01 sub板端连接器

大数据大屏可视化项目

01-项目介绍

为了应对当前数据可视化的趋势，越来越多的企业需要在许多场景（营销数据、生产数据、用户数据）下使用可视化图表来显示和反映数据，使数据更加直观和突出。我们介绍了它 ‘立可得’ 数据可视化项目。

除了使用基础外，该项目还使用了基础DIV CSS还介绍了一些布局C3技术还引入了各种图表的绘制和先进的地图数据可视化案例。主要功能有：饼图、柱图、线图、地图 …

1576208177581

02-使用技术

完成项目需要具备以下知识：

  • div css 布局
  • flex 布局
  • css3动画
  • css3渐变
  • css3边框图片
  • 原生js jquery 使用
  • rem适配
  • echarts基础

粗略代码统计：

  • css 580行
  • html 450行
  • js 400行 (有效)

03-Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库可以顺利运行 PC 在移动设备方面，它与大多数浏览器兼容（IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，数据可视化图表提供直观、交互丰富、高度个性化定制。

大白话：

  • 是一个JS插件
  • 性能好，操作流畅PC与移动设备
  • 与主流浏览器兼容
  • 可以提供许多常用的图表定制。
    • 折线图，柱状图，散点图，饼图，K线图

04-Echarts-体验

官方教程:[5分钟开始ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)

自己步骤：

  • 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
  • 引入echarts dist/echarts.min.js
  • 准备一个有大小的DOM容器
<div id="main" style="width: 600px;height:400px;">div> 
var myChart = echarts.init(document.getElementById('main'));
  • 指定配置项和数据(option)
var option = { 
             xAxis: { 
                 type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },    yAxis: { 
        
        type: 'value'
    },
    series: [{ 
        
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
  • 将配置项设置给echarts实例对象
myChart.setOption(option);

05-Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

演示代码：

var option = { 
        
            color: ['pink', 'blue', 'green', 'skyblue', 'red'],
            title: { 
        
                text: '我的折线图'
            },
            tooltip: { 
        
                trigger: 'axis'
            },
            legend: { 
        
                data: ['直播营销', '联盟广告', '视频广告', '直接访问']
            },
            grid: { 
        
                left: '3%',
                right: '3%',
                bottom: '3%',
                // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签
                // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签
                containLabel: true
            },
            toolbox: { 
        
                feature: { 
        
                    saveAsImage: { 
        }
                }
            },
            xAxis: { 
        
                type: 'category',
                // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
                boundaryGap: false,
                data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: { 
        
                type: 'value'
            },
            series: [
                { 
        
                    name: '直播营销',
                    // 图表类型是线形图
                    type: 'line',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                { 
        
                    name: '联盟广告',
                    type: 'line',

                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                { 
        
                    name: '视频广告',
                    type: 'line',

                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                { 
        
                    name: '直接访问',
                    type: 'line',

                    data: [320, 332, 301, 334, 390, 330, 320]
                }
            ]
        };

06-REM适配

// 实现rem适配
@media screen and (max-width: 1024px) { 
        
     html { 
        
         font-size: 42.66px !important;
     }
 }

 @media screen and (min-width: 1920px) { 
        
     html { 
        
         font-size: 80px !important;
     }
 }

07-基础布局

html结构：

<body>
  <div class="viewport">
  	<div class="column">
                                          
    	<div>div>
			                                    
    	<div>div> 
			                                    
    	<div>div>                                           
    div>
    <div class="column">
                                          
    	<div>div>
			                                    
    	<div>div>                                          
    div>
    <div class="column">
                                          
    	<div>div>
			                                    
    	<div>div>                                  
    	<div>
      	                                    
    		<div>div>
      	                                    
    		<div>div>
      div>
			                                    
    	<div>div>                                     
    div>                        
  div>
body>
  • 效果图： 1920px * 1078px
  • body 设置背景图 ，行高1.15
  • viewport 主体容器，限制最小宽度1024px，与最大宽度1920px，最小高度780px。
    • 需要居中显示
    • 使用logo.png做为背景图，在容器内显示
    • 内间距 88px 20px 0
  • column 列容器，分三列，占比 3：4：3
    • 中间容器外间距 32px 20px 0

css样式：

/* 基础布局 */
body{ 
        
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  font-size: 0.5rem;
  line-height: 1.15;
  background: url(../images/bg.jpg) no-repeat 0 0 / cover;
}
h4,h3,ul{ 
        
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ul{ 
        
  list-style: none;
}
a{ 
        
  text-decoration: none;
}
.viewport{ 
        
  max-width: 1920px;
  min-width: 1024px;
  margin: 0 auto;
  min-height: 780px;
  padding: 3.667rem 0.833rem 0;
  background: url(../images/logo.png) no-repeat 0 0 / contain;
  display: flex;
}
.column{ 
        
  flex: 3;
  position: relative;
}
.column:nth-child(2){ 
        
  flex: 4;
  margin: 1.333rem 0.833rem 0;
}

08-边框图片

css3中自适应边框图片运用：

组合写法：

border-image: url("images/border.jpg") 167/20px round;

拆分写法：

border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;

解释：

  • 边框图片资源地址
  • 裁剪尺寸（上 右 下 左）单位默认px，可使用百分百。
  • 边框图片的宽度，默认边框的宽度。
  • 平铺方式：
    • stretch 拉伸（默认）
    • repeat 平铺，从边框的中心向两侧开始平铺，会出现不完整的图片。
    • round 环绕，是完整的使用切割后的图片进行平铺。

DEMO代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框图片title>
    <style> ul{ 
           margin: 0; padding: 0; list-style: none; } li{ 
           width: 350px; height: 160px; border: 20px solid #ccc; margin-top: 20px; } li:nth-child(1){ 
           /*border-image: url("images/border.jpg") 167/20px round;*/ border-image-source: url("images/border.jpg"); border-image-slice: 167 167 167 167; border-image-width: 20px; /*环绕 是完整的使用切割后的图片进行平铺*/ border-image-repeat: round; } li:nth-child(2){ 
           /*平铺 从边框的中心向两侧开始平铺 会出现不完整的图片*/ border-image: url("images/border.jpg") 167/20px repeat; } li:nth-child(3){ 
           /*默认的平铺方式*/ border-image: url("images/border.jpg") 167/20px stretch; } style>
head>
<body>
<ul>
    <li>li>
    <li>li>
    <li>li>
ul>
body>
html>

09-公用面板样式

所有的面板的基础样式是一致的，提前布局好。

切割示例图：

  • 面板 .panel
    • 容器 .inner 内边距是 上下24px 左右 36px

/* 公共面板样式 */
.panel { 
        
    position: relative;
    border: 15px solid transparent;
    border-width: .6375rem .475rem .25rem 1.65rem;
    border-image-source: url(../images/border.png);
    border-image-slice: 51 38 20 132;
    margin-bottom: .25rem;
}
.inner { 
        
    position: absolute;
    top: -0.6375rem;
    left: -1.65rem;
    right: -0.475rem;
    bottom: -0.25rem;
    padding: .3rem .45rem;
   
}
.panel h3 { 
        
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}

10-概览区域(overview)-布局

html结构：

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

样式描述：

  • 容器高度 110px
  • h4字体 28px #fff 左边距 4.8px 下间隙 8px
  • span字体 16px #4c9bfd
/* 概览区域 */

.overview { 
        
    height: 1.375rem;
}
.overview ul { 
        
    display: flex;
    justify-content: space-between;
}
.overview ul li h4 { 
        
    font-size: .35rem;
    color: #fff;
    margin: 0 0 .1rem .06rem;
}
.overview ul li span { 
        
    font-size: .2rem;
    color: #4c9bfd;
}

11-监控区域(monitor)-布局

html结构：

      
      <div class="monitor panel">
        <div class="inner">
          <div class="tabs">
            <a href="javascript:;" class="active">故障设备监控a>
            <a href="javascript:;" >异常设备监控a>
          div>
          <div class="content">
            <div class="head">
              <span class="col">故障时间span>
              <span class="col">设备地址span>
              <span class="col">异常代码span>
            div>
            元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

相关文章