数据可视化

数据可视化#

目标#

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

数据可视化#

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。

数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理

数据可视化的场景#

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

通用报表、移动端图表、大屏可视化、图编辑&图分析、地理可视化

常见的数据可视化库#

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

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

ECharts#

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

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

apache地址： https://echarts.apache.org/zh/index.html

github地址： https://github.com/apache/echarts

ECharts使用#

ECharts配置无需背，根据文档查阅即可，或者 百度一下

1. 步骤1：下载并引入 echarts.js 文件，图表依赖这个js库
2. 步骤2：准备一个 具备大小 的DOM容器，生成的图表会放入此容器
3. 步骤3：初始化echarts实例对象
4. 步骤4：指定配置项和数据（option）
5. 步骤5：将配置设置给echarts实例对象

相关配置#

相关配置

配置	描述	配置	描述
title	标题组件	tooltip	提示框组件
legend	图例组件	toolbox	工具栏
grid	直角坐标系内绘图网格	xAxis	直角坐标系grid中的x轴
yAxis	直角坐标系grid中的y轴	series	系列列表，每个系列通过type决定自己的图表类型
color	调色盘颜色列表

series：系列列表

• type：类型，比如line是折线，bar柱形图等
• name：系列名称，用于tooltip的显示，legend的图例筛选变化
• stack：数据堆叠，若设置相同值，则会数据堆叠。

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

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

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

边框图片#

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

使用场景#

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

边框图片切图原理#

把四个角切出去（九宫格的由来），中间部分可以铺排、拉伸或者环绕

按上右下左的顺序切割

边框图片语法#

边框图片语法

属性	描述
border-image-source	用在边框的图片的路径。
border-image-slice	图片边框向内偏移。（裁剪的尺寸，一定不加单位，上右下左的顺序）
border-image-width	图片边框的宽度（需要加单位）（非边框的宽度），默认为边框的宽度，但是不会挤压文字
border-image-repeat	图像边框是否应平铺（repeat），铺满（round），或 拉伸（stretch） 默认拉伸

border:50px，盒子边框会挤压文字

border-image-width:50px，图片边框不挤压文字

ES6模板字符 （全国热榜模块制作） #

ES6模板字符可以极大地提高开发效率

语法规范：

                
JavaScript
                // 模板字符串使用反钩号``并且允许自由换行
                `${表达式}`