第二阶段：数据可视化项目（一）

m0_59817723

已于 2023-12-06 21:08:43 修改

阅读量75

点赞数

文章标签：信息可视化数据分析数据挖掘

于 2023-12-05 22:49:13 首次发布

本文链接：https://blog.csdn.net/m0_59817723/article/details/134801812

版权

一：数据可视化项目

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)

m0_59817723

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二阶段：数据可视化项目（一）

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。
复制链接

扫一扫