数据可视化

（1）什么是数据可视化

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

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

（2）数据可视化使用场景

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

通用报表

移动端图表

大屏可视化

图编辑&图分析

地理可视化

（3）常见的数据可视化库

D3.js：目前WEB端评价最高的JavaScript可视化工具库（入手难）

ECharts.js：百度出品的一个开源JavaScript数据可视化库

Highcharts.js：国外的前端数据可视化库，非商用免费，被许多国外大公司所使用

AntV：蚂蚁金服全新一代数据可视化解决方案

ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender]，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts能满足绝大多数可视化图表实现，使用方便，功能强大，是实现数据可视化的最优选择之一。

ECharts的基本使用

ECharts官网地址：https://echarts.apache.org/

官网教程快速上手ECharts：https://echarts.apache.org/handbook/zh/get-started/

ECharts的基本使用并不难，你首先需要记住下面的五步曲，其次就是要会查文档。

ECharts使用五步曲：
步骤一：下载并引入echarts.js文件；（图表依赖这个js库）
步骤二：准备一个具备大小的DOM容器；（生成的图表会放入这个容器内）
步骤三：初始化echarts实例对象；（实例化echarts对象）
步骤四：指定配置项和数据(option)；（根据具体需求修改配置选项）
步骤五：将配置项设置给echarts实例对象；（让echarts对象根据修改好的配置生效）

必备技能—-查文档

第一步：进入官网找到文档菜单栏下的文档配置手册，如下图：

第二步：左侧找到相关属性，去查看右边的属性说明并在代码中使用就好了，如下图：

ECharts使用五步曲

接下来，跟着博主一起一步一步慢慢来

步骤一：下载并引入echarts.js文件

如下图：点击下载菜单栏，显示一下界面，选择想要下载的版本，点击后面的Dist，跳转到新的页面选择echarts.js下载。

引入文件：<script src=”js/echarts.min.js”></script>

步骤二：准备一个具备大小的DOM容器

<body>
    <div class="box"></div>
</body>

.box {
            width: 400px;
            height: 400px;
            background-color: pink;
        }

步骤三：初始化echarts实例对象

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

注意：echarts.init（）；括号里面获取DOM容器

步骤四：指定配置项和数据(option)

如下图：去找到你想要的官网示例菜单下面任意一个图表，点击打开，复制左侧的代码

在 <script> </script>中粘贴代码，并声明一个变量option，方便最后一步使用

步骤五：将配置项设置给echarts实例对象

myChart.setOption(option);

Echarts-基础配置

需要了解的主要配置：series xAxis yAxis grid tooltip title legend color

series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
color：调色盘颜色列表