JS 数据可视化

数据可视化

一、 什么是数据可视化

1、 概念

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

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

2、 常见的数据可视化库

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

3、 小结

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

数据可视化在互联网公司中经常用于通用数据报表、移动端图表、大屏可视化、图编辑等

数据可视化库有很多，这里主要学习 ECharts

二、 ECharts

1、 ECharts 简介

ECharts 是一个使用 JS 实现的开源可可视化库，可以流畅的运行在 PC 端和移动端上面，兼容当前绝大多数浏览器，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表

优点：

• 丰富的可视化类型
• 多种数据格式支持
• 流数据的支持
• 移动端优化
• 跨平台使用
• 绚丽的特效
• 详细的文档说明

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

2、 ECharts 基本使用

2.1 使用五部曲

1. 下载并引入 echarts.js 文件 --> 图表依赖库

   下载文件地址：https://cdn.staticfile.org/echarts/4.7.0/echarts.js

   <script src="./dist/js/echarts.js"></script>
   

2. 准备一个具备大小的 DOM 容器 – > 生成的图片会放入这个容器内

   <div id="main" style="width: 600px; height: 400px;background-color: pink;"></div>
   

3. 初始化 echarts 实例对象 --> 实例化 echarts 对象

   // 初始化 echarts 实例化对象
   var myChart = echarts.init(document.querySelector("#main"));
   

4. 指定配置项和数据 --> 根据具体需求修改配置选项

   // 指定图表的配置项和数据
   var option = {
        
       title: {
        
           text: 'ECharts 入门示例'
       },
       tooltip