文章目录
数据可视化
一、 什么是数据可视化
1、 概念
数据可视化主要的目的:借助图形化手段,清晰有效地传递与沟通信息
数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理
2、 常见的数据可视化库
- D3:目前 Web 评价最高的 JS 可视化工具库(入手难)
- ECharts:百度出品的一个开源 JS 数据可视化库
- Highcharts:国外的前端数据可视化库,非商用免费,被许多国外大公司所使用
- AntV:蚂蚁金服全新一代数据可视化解决方案
3、 小结
数据可视化主要目的:借助图形化手段,清晰有效地传达与沟通信息
数据可视化在互联网公司中经常用于通用数据报表、移动端图表、大屏可视化、图编辑等
数据可视化库有很多,这里主要学习 ECharts
二、 ECharts
1、 ECharts 简介
ECharts 是一个使用 JS 实现的开源可可视化库,可以流畅的运行在 PC 端和移动端上面,兼容当前绝大多数浏览器,底层依赖矢量图形库 ZRender ,提供直观,交互丰富,可高度个性化定制的数据可视化图表
优点:
- 丰富的可视化类型
- 多种数据格式支持
- 流数据的支持
- 移动端优化
- 跨平台使用
- 绚丽的特效
- 详细的文档说明
ECharts 能满足绝大多数可视化图标实现,使用方便,功能强大,是实现数据可视化的最优选择之一
2、 ECharts 基本使用
2.1 使用五部曲
-
下载并引入 echarts.js 文件 --> 图表依赖库
下载文件地址:https://cdn.staticfile.org/echarts/4.7.0/echarts.js
<script src="./dist/js/echarts.js"></script>
-
准备一个具备大小的 DOM 容器 – > 生成的图片会放入这个容器内
<div id="main" style="width: 600px; height: 400px;background-color: pink;"></div>
-
初始化 echarts 实例对象 --> 实例化 echarts 对象
// 初始化 echarts 实例化对象 var myChart = echarts.init(document.querySelector("#main"));
-
指定配置项和数据 --> 根据具体需求修改配置选项
// 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip