数据可视化项目知识点以及代码演示

最新推荐文章于 2024-04-26 23:34:33 发布

库库好困

最新推荐文章于 2024-04-26 23:34:33 发布

阅读量1.8k

点赞数 2

分类专栏：数据可视化项目文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_46597922/article/details/107368950

版权

DAY01-可视化项目

项目介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。

该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kC7owgMb-1594813569100)(docs/media/1576208177581.png)]

课程目标：

实践jquery相关技术
掌握echarts的基本使用

使用技术

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

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

Echarts-介绍

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网链接

大白话：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
折线图、柱状图、散点图、饼图、K线图

Echarts-体验

官方教程：五分钟上手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>

初始化echart实例

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'
    }]
};

使用刚指定的配置项和数据显示图表

myChart.setOption(option);

Echarts-基础配置

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

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图表数据，指定什么类型的图表，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表

演示代码：

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',
        name:'线形图'
    },
    {
   
        data: [22, 333, 111, 222, 444, 666, 777],
        type: 'bar',
        name:'饼状图'
    }],
    grid: {
   
        show: true
    },
    title: {
   
        text: '标题'
    },
    tooltip: {
   
        padding: 20
    },
    legend: {
   
        data: ['线形图']
    },
    color: ['red','green']
};

REM适配

设计稿是1920px ，约定rem基准值为 24px 。
那么：设备宽度与rem基准值比例为 80 。
结论：适配设备的时候保持80的比例即可。
将来：换算rem单位的时候，使用24px基准值即可。

实现代码，在页面底部加载index.js文件实现动态设置基准值逻辑：

<script src="js/index.js"></script>

// 实现rem适配
(function () {
   
  var setFont = function () {
   
    var html = document.documentElement
    var width = window.innerWidth
    if (width < 1024) {
   
        width = 1024
    }
    if (width > 1920) {
   
        width = 1920
    }
    var fontSize = width / 80 + 'px'
    html.style.fontSize = fontSize
  }
  setFont()
  window.onresize = function () {
   
    setFont()
  }
})()

基础布局

html结构：

<body>
  <div class="container">
  	<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>
</body>

css样式：

/* 基础布局 */
body{
   
  font-size: 0.5rem;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background: url(../images/bg.jpg) no-repeat 0 0 / cover;
  /* 行高是字体1.15倍 */
  line-height: 1.15;
}
h4,h3,ul{
   
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ul{
   
  list-style: none;
}
a{
   
  text-decoration: none;
}

/*架构布局*/
.container{
   
  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;
}

概览区域-布局

html结构：

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

样式描述：

容器高度 110px
h4字体 28px #fff 左padding 4.8px 下margin 8px
span字体 16px #4c9bfd

/* 概览区域 */
.overview{
   
  height: 4.583rem;
}
.overview .inner{
   
  display: flex;
  justify-content: space-between;
}
.overview h4{
   
  font-size: 1.167rem;
  padding-left: 0.2rem;
  color: #fff;
  margin-bottom: 0.333rem
}
.overview span{
   
  font-size: 0.667rem;
  color: #4c9bfd;
}

边框图片

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fSPOWz9a-1594813569103)(docs/media/1576483576664.png)]

组合写法：

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;

解释：

border-image-slice裁剪尺寸（上右下左）单位默认px，可使用百分百。
border-image-width边框图片的宽度，默认边框的宽度。
平铺方式：
- 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");
            /*自带px单位，所以直接写数值*/
            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>

公用面板样式

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

切割示例图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mVpKAytv-1594813569105)(docs/media/1576489873296.png)]

面板 .panel
容器 .inner
标题 h3

/* 面板公用样式 */
.panel{
   
  border: 2rem solid #ccc;
  border-width: 2.125rem 1.583rem 0.833rem 5.5rem;
  border-image: url(../images/border.png) 51 38 20 132;
  position: relative;
  margin-bottom: 0.833rem;
  box-sizing: border-box;
}
.panel .inner{
   
  position: absolute;
  top: -2.125rem;
  right: -1.583rem;
  bottom: -0.833rem ;
  left: -5.5rem;
  padding: 1rem 1.5rem;
}
.panel h3{
   
  font-size: 0.833rem;
  color: #fff;
}

监控区域-布局

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" 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 class="row">
                        <span class="col">20190601</span>
                        <span class="col">北京市昌平区城西路金燕龙写字楼</span>
                        <span class="col">1000002</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20190704</span>
                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                        <span class="col">1000003</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20180701</span>
                        <span class="col">北京市昌平区建路金燕龙写字楼</span>
                        <span class="col">1000004</span>
                        <span class="icon-dot"></span>
                    </div>
                    <div class="row">
                        <span class="col">20190701</span>
                        <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                        <span class="col">1000005</

最低0.47元/天解锁文章

库库好困

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
数据可视化项目知识点以及代码演示

DAY01-可视化项目项目介绍应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …课程目标：实践jquery相关技术掌握echarts的基本使用使用技术完成该项目需要具备以下知识：
复制链接

扫一扫

专栏目录