第二阶段:数据可视化项目(一)

一:数据可视化项目

1.1:目标

  • 能够说出数据可视化的目的
  • 能够说出ECharts的基本使用步骤
  • 能够独立使用ECharts完成可视化项目开发

1.2: 目录

什么是数据可视化

数据可视化项目概述

EChats简介

EChats的基本使用

数据可视化项目开发

1.3: 什么是数据可视化

1: 数据可视化

  • 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
  • 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。

2:数据可视化的场景

目前互联网公司通常有这么几大类的可视化需求:

3: 常见的数据可视化库

  • D3.js目前Web端评价最高的Javascript可视化工具库(入手难)
  • ECharts.js百度出品的一个开源Javascript数据可视化库
  • Highcharts.js国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
  • AntV蚂蚁金服全新一代数据可视化解决方案
  • 等等

Highcharts和Echarts就像是Office和WPS的关系

4: 小结

  • 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息
  • 数据可视化在我们互联网公司中经常用于通用数据报表,移动端图表,大屏可视化,图编辑等
  • 数据可视化库有很多,接下来我们重点学习ECharts

1.4: 数据可视化项目概述

1: 项目展示

2: 项目目的

市场需求:

应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。

学习阶段需求:

项目对我们同学来说,起着承上启下作用。

3: 项目技术

  • HTML5 + CSS3布局
  • CSS3动画、渐变
  • jQuery库+原生JavaScript
  • flex布局和rem适配方案
  • 图片边框border-image
  • ES6模板字符
  • ECharts可视化库等等

4: 小结

数据可视化项目展示

学习这个项目的目的:市场需求和学习阶段需求

项目用到的技术:以前学习过的技术和新技术

  • CSS3动画、渐变
  • jQuery库+原生JavaScript
  • flex布局和rem适配方案
  • 图片边框border-image
  • ES6模板字符
  • ECharts可视化库等等

Highcharts和Echarts就像是Office和WPS的关系

1.5: ECharts简介

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

官网地址:https://www.echartsjs.com/zh/index.html

Apache ECharts

快速上手 - Handbook - Apache ECharts

  • 丰富的可视化类型
  • 多种数据格式支持
  • 流数据的支持
  • 移动端优化
  • 跨平台使用
  • 绚丽的特效
  • 详细的文档说明

1.6: ECharts的基本使用

1: ECharts使用五步曲

注意:这里只要求同学们记住Echarts使用的步骤,具体修改定制稍后会讲。

2: 选择不同类型图表

3: 相关配置讲解

  • title:标题组件
  • tooltip:提示框组件
  • legend:图例组件
  • toolbox: 工具栏
  • grid:直角坐标系内绘图网格
  • xAxis:直角坐标系 grid 中的 x 轴
  • yAxis:直角坐标系 grid 中的 y 轴
  • series: 系列列表。
  • color:调色盘颜色列表

先了解以上9个配置的作用,其余配置还有具体细节我们查阅文档:文档菜单—配置项手册学echarts关键在于学会查阅文档,根据需求修改配置

series: 系列列表

type:类型 (什么类型的图表) 比如 line 是折线 bar柱形等

name: 系列名称,用于tooltip的显示,legend的图例筛选变化

stack: 数据堆叠。如果设置相同值,则会数据堆叠。

             数据堆叠:第二个数据值= 第一个数据值+ 第二个数据值

                               第三个数据值= 第二个数据值+ 第三个数据值…. 依次叠加

             如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠

先了解以上9个配置的作用,其余配置还有具体细节我们查阅文档:文档菜单—配置项手册学echarts关键在于学会查阅文档,根据需求修改配置

4:小结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts体验</title>
    <!-- 1:引入echart.js文件 -->
    <script src="echart.mini.js"></script>

    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- 2: 准备一个盒子用来装生成的图表 注意:这个盒子必须具备大小 -->
    <div class="box"></div>

    <script>
        // 3: 初始化echarts 实例对象
        var myChart = echarts.init(document.querySelector('.box'));

        // 4: 指定配置项和数据(想要什么图形就在文档中找到对应的代码,复制更换这一步即可)
        var option = {
            title: {
                text: 'Stacked Line'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'Email',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: 'Video Ads',
                    type: 'line',
                    stack: 'Total',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: 'Direct',
                    type: 'line',
                    stack: 'Total',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    stack: 'Total',
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };

        // 5: 将配置项设置给echarts实例对象
        myChart.setOption(option);
    </script>

</body>

</html>

二: 数据可视化项目

2.1: 目录

数据可视化项目适配方案

数据可视化项目开发

2.2: 数据可视化项目适配方案

1: 项目需求

  • 设计稿是1920px
  • PC端适配:宽度在 1024~1920之间页面元素宽高自适应

2: 适配方案

要把屏幕宽度约束在1024~1920之间有适配

@media screen and (max-width: 1024px) {

       html {

            font-size: 42.66px!important;

   }

}

@media screen and (min-width: 1920px) {

        html {

               font-size: 80px!important;

    }

 } 

步骤:

 0: 屏幕默认分成10等份,但是根据项目,改成24等份更精准

  1: 引入flexible.js文件,把10等份改成24等份  ,把插件的基准值改为80,重启vscode

  2: 要把屏幕宽度约束在1024 ~ 1920之间有适配

2.3: 数据可视化项目开发

步骤:

  1: 引入css,  echarts.min.js , flexible.js. ,  jquery.min.js 文件

  2: 安装preview on web server 插件

  3: html + css搭建结构,再通过echarts.js等填写图表等内容

  4: 给body指定背景图片, 

  5: 网页布局 父盒子里面有三个盒子

  6: 设置父盒子宽高 ,背景图片(contain:一个图片完全显示出来;cover:铺满整个盒子)

  7: 分别给三个盒子里面装小盒子就可以了

  8: 发现每个盒子都有相似的边框,添加背景图片不能实现,因为每个盒子的大小不一样;就通过边框图片来实现;

      公共面板样式:

  9: 每个图片的边框都一样,可以把这个统一封装,需要的时候进行调用;写一个公共的面板样式;

 10: 准备公共面板样式 panel---需要的盒子进行调用   

  •          给盒子添加边框,因为给盒子制定边框的宽度,就不用给盒子指定边框图片的宽度了(因为边框图片的宽度默认就和边框的宽度一样) ,就给边框四个不同的边;
  •         给边框一个背景图片 border- image - source
  •         给边框图片进行切割 border-image-slice;
  •  注意:边框的宽度需要转换成rem,因为它随着屏幕大小改变的;但是边框切割不带单位,不需要转换;
  •         输入的内容,在盒子的右下,因为设置了盒子边框的宽度 ;如何让内容往左,上一点显示? 给内容专门新建立一个盒子,并且添加绝对定位,但内容盒子还是只会沿着盒子边框,也不会往上,左(也不会压住盒子边框)。可以把内容盒子拉伸 (top,left,right, bottom),拉伸后可以覆盖掉边框的宽度 ; 但别压的太紧了,可以给内容盒子设置内边距;
  •  而且每个盒子(公共面板)都有一个 下外边距 20px 转换成rem

       通过类名调用字体图标:

11: 每个盒子都有图标,用图片做不太合适 ,需要用字体图标来做比较合适(之前有学),现有一种新的方式来做字体图标   ,通过类名来调用字体图标

疑问:

 1: .viewpoint给了背景图片,但是也给了padding,为啥背景图片没有移动;

 2: 需要更加深入了解图片切割

1: 项目基础布局

2: 边框图片

1. 边框图片的使用场景

盒子大小不一,但是边框样式相同,此时就需要边框图片来完成

为了实现丰富多彩的边框效果,在CSS3中,新增了 border-image属性,这个新属性允许指定一幅图像作为元素的边框。

2. 边框图片的切割原理(重要)

把四个角切出去(九宫格的由来),中间部分可以铺排、拉伸或者环绕。(按照上右下左顺序切割)

 九宫格切图的原理:就是把四个角切完整;切的顺序是上右下左

3. 边框图片语法规范(重要)

border-image-slice:这个是指上右下左切的高度;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框图片</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            border: 15px solid pink;
            border-image-source: url();
            /* 上下左右切 */
            border-image-slice: 30 30 30 30;
            /* 这个属性默认的是 border的宽度 但是 有区别 ,这个是  边框图片的宽度  不会挤压文字 */
            border-image-width: 30px;
            border-image-repeat: round;
        }
    </style>
</head>

<body>
    <div>加油吧</div>
</body>

</html>

3: 通过类名调用字体图标

icommon字体图标文件---复制style.css和 fonts 放到代码文件目录中(style.css放在fonts文件夹了,打开style.css,原本是url需要经过fonts的,但放入fonts文件夹中,就删除fonts)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值