数据可视化项目

一、数据可视化概述

1.项目介绍

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

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

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

1.基本使用步骤

① 下载并引用 echarts.js 文件

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

我们下载这个压缩过的文件，echarts.min.js！

引入 echarts.min.js 文件！

<script src="js/echarts.min.js"></script>
1

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

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

③ 初始化 echarts 实例对象

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

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

④ 指定配置项和数据

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

往下翻找到指定图标的配置项和数据，直接把代码复制过来！

粘贴到我们的项目文件中！

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

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

myChart.setOption(option);
1

现在看一下运行结果吧！

2.不同类型图表

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

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

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

3.相关配置修改

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

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

重点是学会查阅文档手册学习 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;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12

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

四、数据可视化项目开发

1.项目布局准备

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

三个 js 插件可自行从官网上下载！

2.边框图片切图

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

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

3.公共面板样式

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

4.类名调用字体图标

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

<link rel="stylesheet" href="style.css">
1

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

<span class="icon-angellist"></span>
1

特别注意 style.css 里面路径的问题，必要时做修改！

5.变量名冲突问题

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

(function() {
    var num = 10;
})();
(function() {
    var num = 10;
})();
1
2
3
4
5
6

6.监控区无缝滚动

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

animation-play-state: paused;
1

五、项目源码素材

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