数据可视化项目

「爱情、让人受尽委屈。」 2023-09-24 12:49 153阅读 0赞

#### 文章目录 ####

*   *  一、数据可视化概述
     *  二、ECharts 可视化库
     *   *  1.基本使用步骤
         *  2.不同类型图表
         *  3.相关配置修改
     *  三、项目适配方案
     *  四、数据可视化项目开发
     *   *  1.项目布局准备
         *  2.边框图片切图
         *  3.公共面板样式
         *  4.类名调用字体图标
         *  5.变量名冲突问题
         *  6.监控区无缝滚动
     *  五、项目源码素材

### 一、数据可视化概述 ###

**1.项目介绍**

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。  
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。  
目前互联网公司通常有这么几大类的可视化需求：

![在这里插入图片描述][49a7ce8345c9437482201ddb188b183d.png_pic_center]  
![在这里插入图片描述][befc90cc39be4f148944bd0a85169e84.png_pic_center]

**2.项目目的**

① 应对现在数据可视化的趋势，越来越多企业需要在很多场景（营销数据、生产数据、用户数据）下使用可视化图表来展示体现数据，让数据更加直观，数据特点更加突出；  
② 为学习服务器编程做铺垫，如何把服务器里面的数据渲染到页面中。

**3.项目技术**

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

### 二、ECharts 可视化库 ###

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

ECharts 的官网地址：`https://echarts.apache.org/zh/index.html`

![在这里插入图片描述][58e9ff34acdb40efa854941a20da7ac7.png_pic_center]

![在这里插入图片描述][ffe03811b3c84a9a8e66a3ef3081ec77.png_pic_center]

> ECharts 能满足绝大多数可视化图表的实现，使用方便，功能强大，是实现数据可视化的最优选择之一。

#### 1.基本使用步骤 ####

**① 下载并引用 echarts.js 文件**

图表依赖这个 JS 库，我们现在通过第一种方法下载，点击 Dist！

![在这里插入图片描述][4ad3551aed7d4a55be7d2362dbc5a673.png_pic_center]  
我们下载这个压缩过的文件，echarts.min.js！

![在这里插入图片描述][d9b8291a2236429998fa80788b5e9740.png_pic_center]  
引入 echarts.min.js 文件！

**② 准备一个具备大小的 DOM 容器**

生成的图表会放入这个容器内！

![在这里插入图片描述][bdc5d4c2859f4b6aa2d8dce10f318ae6.png_pic_center]

**③ 初始化 echarts 实例对象**

页面中的每一个图表都是一个单独的实例对象！

var myChart = echarts.init(document.querySelector('.box'));

**④ 指定配置项和数据**

根据具体需求修改配置选项，我们现在先试一下不修改配置项，主页文档点击使用手册！

![在这里插入图片描述][59d566a119074a42847a315980ddea48.png_pic_center]  
往下翻找到指定图标的配置项和数据，直接把代码复制过来！

![在这里插入图片描述][1fe3b239aff34a82ba10ae62c98e0e99.png_pic_center]  
粘贴到我们的项目文件中！

![在这里插入图片描述][5991d6fd213e4807bed7f12d83dac313.png]

**⑤ 将配置项设置给 echarts 实例对象**

让 echarts 对象根据修改好的配置生效！

myChart.setOption(option);

现在看一下运行结果吧！

![在这里插入图片描述][471bf4cbb82e4c68ba45a6c34ac2ef76.png]

#### 2.不同类型图表 ####

打开示例，想要哪个点哪个！

![在这里插入图片描述][259baaea4b0842a79ab33351a981250b.png]

点开之后，把左侧的代码全部复制过来粘贴到我们自己的项目文件里面，这就是它的相关配置！

![在这里插入图片描述][d9a22cfcdc454ea6b57e9c39a1b8660b.png]

同样道理，将配置项设置给示例对象就算完成！

![在这里插入图片描述][5653edd9b5c34b57a30a0a9f125c47c8.png]

#### 3.相关配置修改 ####

先了解以下9个配置的作用，其余配置还有具体细节我们可以查阅文档，文档 → 配置项手册。

> ① title，标题组件；  
> ② tooltip，提示框组件；  
> ③ legend，图例组件；  
> ④ toolbox，工具栏；  
> ⑤ grid，直角坐标系内绘图网格；  
> ⑥ xAxis，直角坐标系 grid 中的 x 轴；  
> ⑦ yAxis，直角坐标系 grid 中的 y 轴；  
> ⑧ series，系列列表，每个系列通过 type 决定自己的图表类型；  
> ⑨ color，调色盘颜色列表

![在这里插入图片描述][0f2b25bccf4b46288b5aa4109a0ce298.png]

`重点是学会查阅文档手册学习 ECharts，根据需求修改配置项！`

### 三、项目适配方案 ###

① flexible.js 插件，检测浏览器宽度并修改 HTML 文字大小；  
② rem 单位，页面元素根据 rem 适配大小，配合 cssrem 插件；  
③ flex 布局，页面快速布局。

> flexible.js 把屏幕分成20等份，PC 端的效果图我们要求是1920px，则 cssrem 插件的基准值是80px，进入 VScode 修改基准值为80，rem 值自动生成。

/* 屏幕宽度小于1024px后固定单位，1024/24= 42.67*/
            @media screen and (max-width:960px){
        
                html {
        
                    font-size: 42.67px !important;
                }
            }
            /* 屏幕宽度大于1920px后固定单位，1920/24=80 */
            @media screen and (min-width:1520px) {
        
                html {
        
                    font-size: 80px !important;
                }
            }

`具体 flexible.js 下载及 cssrem 安装配置请参考我上一篇文章！`

### 四、数据可视化项目开发 ###

#### 1.项目布局准备 ####

`项目核心，先布好局，之后利用 ECharts 填充图表！`

![在这里插入图片描述][a2d0d269ddd14afa8faef77418a38920.png]

![在这里插入图片描述][d67f513575694eda9aef45dad2294acf.png_pic_center]  
`三个 js 插件可自行从官网上下载！`

#### 2.边框图片切图 ####

使用场景：盒子大小不一，但是边框样式相同，此时就需要边框图片来完成！  
为实现丰富多彩的边框效果，在 CSS3 中，新增了 border-image 属性，这个新属性允许指定一副图像作为元素的边框。（边框图片不等于背景图片）  
边框图片切图原理：把四个角切出去，中间部分可以铺满、拉伸或者环绕。（切四刀）

![在这里插入图片描述][0c36484001df4eab86d0eaab3d6d8edb.png]

`边框图片的宽度不会挤压文字！`

#### 3.公共面板样式 ####

![在这里插入图片描述][ccd35a2c41f1445494f135f518bcb3f0.png]

border-image-slice：按照上右下左的顺序切割！  
由于我们设的边框会挤压文字，导致文字不能在正确的位置显示，这时候我们再用一个内容盒子，使用绝对定位，将内容盒子的 top、right、bottom、left 均设置为负值，向外拉伸，内容数据的位置可通过 padding 改变。

#### 4.类名调用字体图标 ####

① HTML 页面引入字体图标中的 CSS 文件。

② 标签直接调用图标对应的类名即可。

![在这里插入图片描述][51a13b3351d8490d84215250853f3a93.png]  
`特别注意 style.css 里面路径的问题，必要时做修改！`

#### 5.变量名冲突问题 ####

JS 文件中，会有大量的变量名，特别是 ECharts 的使用中，需要大量初始化对象，为了防止变量名冲突（变量污染），我们采用立即执行函数策略：

(function() {
        
        var num = 10;
    })();
    (function() {
        
        var num = 10;
    })();

#### 6.监控区无缝滚动 ####

① 先克隆 marquee 里面的所有行；  
② 通过 CSS3 动画滚动 marquee；  
③ 鼠标经过 marquee 就停止动画。

animation-play-state: paused;

### 五、项目源码素材 ###

完整项目素材包：https://gitee.com/xiaoqiang001/java-script/commit/a2405b3a5a28e508232c9888fba09420bf54e6d0

![在这里插入图片描述][c721eb3d89584386a3e6043deb7332b0.png_pic_center]

[49a7ce8345c9437482201ddb188b183d.png_pic_center]: https://img-blog.csdnimg.cn/49a7ce8345c9437482201ddb188b183d.png#pic_center
[befc90cc39be4f148944bd0a85169e84.png_pic_center]: https://img-blog.csdnimg.cn/befc90cc39be4f148944bd0a85169e84.png#pic_center
[58e9ff34acdb40efa854941a20da7ac7.png_pic_center]: https://img-blog.csdnimg.cn/58e9ff34acdb40efa854941a20da7ac7.png#pic_center
[ffe03811b3c84a9a8e66a3ef3081ec77.png_pic_center]: https://img-blog.csdnimg.cn/ffe03811b3c84a9a8e66a3ef3081ec77.png#pic_center
[4ad3551aed7d4a55be7d2362dbc5a673.png_pic_center]: https://img-blog.csdnimg.cn/4ad3551aed7d4a55be7d2362dbc5a673.png#pic_center
[d9b8291a2236429998fa80788b5e9740.png_pic_center]: https://img-blog.csdnimg.cn/d9b8291a2236429998fa80788b5e9740.png#pic_center
[bdc5d4c2859f4b6aa2d8dce10f318ae6.png_pic_center]: https://img-blog.csdnimg.cn/bdc5d4c2859f4b6aa2d8dce10f318ae6.png#pic_center
[59d566a119074a42847a315980ddea48.png_pic_center]: https://img-blog.csdnimg.cn/59d566a119074a42847a315980ddea48.png#pic_center
[1fe3b239aff34a82ba10ae62c98e0e99.png_pic_center]: https://img-blog.csdnimg.cn/1fe3b239aff34a82ba10ae62c98e0e99.png#pic_center
[5991d6fd213e4807bed7f12d83dac313.png]: https://img-blog.csdnimg.cn/5991d6fd213e4807bed7f12d83dac313.png
[471bf4cbb82e4c68ba45a6c34ac2ef76.png]: https://img-blog.csdnimg.cn/471bf4cbb82e4c68ba45a6c34ac2ef76.png
[259baaea4b0842a79ab33351a981250b.png]: https://img-blog.csdnimg.cn/259baaea4b0842a79ab33351a981250b.png
[d9a22cfcdc454ea6b57e9c39a1b8660b.png]: https://img-blog.csdnimg.cn/d9a22cfcdc454ea6b57e9c39a1b8660b.png
[5653edd9b5c34b57a30a0a9f125c47c8.png]: https://img-blog.csdnimg.cn/5653edd9b5c34b57a30a0a9f125c47c8.png
[0f2b25bccf4b46288b5aa4109a0ce298.png]: https://img-blog.csdnimg.cn/0f2b25bccf4b46288b5aa4109a0ce298.png
[a2d0d269ddd14afa8faef77418a38920.png]: https://img-blog.csdnimg.cn/a2d0d269ddd14afa8faef77418a38920.png
[d67f513575694eda9aef45dad2294acf.png_pic_center]: https://img-blog.csdnimg.cn/d67f513575694eda9aef45dad2294acf.png#pic_center
[0c36484001df4eab86d0eaab3d6d8edb.png]: https://img-blog.csdnimg.cn/0c36484001df4eab86d0eaab3d6d8edb.png
[ccd35a2c41f1445494f135f518bcb3f0.png]: https://img-blog.csdnimg.cn/ccd35a2c41f1445494f135f518bcb3f0.png
[51a13b3351d8490d84215250853f3a93.png]: https://img-blog.csdnimg.cn/51a13b3351d8490d84215250853f3a93.png
[c721eb3d89584386a3e6043deb7332b0.png_pic_center]: https://img-blog.csdnimg.cn/c721eb3d89584386a3e6043deb7332b0.png#pic_center