文章目录
一、数据可视化概述
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>
② 准备一个具备大小的 DOM 容器
生成的图表会放入这个容器内!
③ 初始化 echarts 实例对象
页面中的每一个图表都是一个单独的实例对象!
var myChart = echarts.init(document.querySelector('.box'));
④ 指定配置项和数据
根据具体需求修改配置选项,我们现在先试一下不修改配置项,主页文档点击使用手册!
往下翻找到指定图标的配置项和数据,直接把代码复制过来!
粘贴到我们的项目文件中!
⑤ 将配置项设置给 echarts 实例对象
让 echarts 对象根据修改好的配置生效!
myChart.setOption(option);
现在看一下运行结果吧!
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;
}
}
具体 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">
② 标签直接调用图标对应的类名即可。
<span class="icon-angellist"></span>
特别注意 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