目标：

  • 理解数据可视化的目的
  • 说出ECharts的基本使用步骤
  • 能独立使用Echarts完成可视化项目

什么是数据可视化

数据可视化的 目的

数据可视化的主要目的：借助图像化手段 ，清晰有效得 传达 与 沟通 信息。
Snipaste_2021-12-18_12-01-20.png

数据可视化的场景

目前互联网公司 通常的可视化需求：

常用可视化库

Snipaste_2021-12-19_06-59-24.png

Echart数据可视化项目概述

项目展示

Snipaste_2021-12-19_07-19-26.png

项目目的

  1. 市场需求，越来越多企业需要可视化图表来展示体现数据。
  2. 学习需求—承上启下

承上：
复习以前的内容：html5+css3布局，Javascript\jQuery技术
启下：
里面存在大量数据，这些数据从何而来？
如何把服务器里面的数据渲染到页面中? // 因为这里的数据会实时变化，所以todolist真的很重要
ps: 这就为学习服务器编程做了铺垫

项目技术

html5+css3布局
css3动画、渐变
jQuery库 + Javascript原生
flex布局 和 rem 适配方案
图形边框border-image
ES6模板文字符
EChart可视化库等等

ECharts简介

ECharts是一个使用javaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库ZRender，提供直观、交互丰富、可高度个性化定制的数据可视化图表。
// 说白了Echart就是js文件，学会调用，能够使用就好