数据可视化-Echarts

一只小小爱哭鬼

已于 2022-07-20 16:30:39 修改

阅读量366

点赞数

分类专栏： JavaScript 学习笔记文章标签： echarts

于 2022-07-13 15:32:06 首次发布

原文链接：https://www.bilibili.com/video/BV1Sy4y1C7ha?share_source=copy_web

版权

JavaScript 学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1. 什么是数据可视化
- 1.1 数据可视化
  - 主要目的：借助于图形化手段，清晰有效地传达与沟通信息
  - 可以把数据从冰冷的数字转成图形，揭示蕴含在数据中的规律和道理
- 1.2 数据可视化的场景
  - 通用报表
  - 移动端图表
  - 大屏可视化
  - 图编辑&图分析
  - 地理可视化
- 1.3 常见的数据可视化库
  - D3.js目前Web端评价最高的Javascript可视化工具库(入手难)
  - ECharts.js 百度出品的一个开源Javascript 数据可视化库
  - Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
  - 用AntV蚂蚁金服全新--代数据可视化解决方案
  - 等等
2. 数据可视化项目概述
- 2.1项目技术
  - HTML5+CSS3布局
  - CSS3动画、渐变
  - jQuery库+原生JavaScript
  - flex布局和rem适配方案
  - 图片边框border-image
  - ES6模板字符
  - ECharts可视化库
3. ECharts简介
- echarts是一个使用JavaScript实现的开源可视化库，可以流畅地运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图库ZRender，提供直观交互丰富，可高度个性化定制的数据可视化图表
- 官网地址：http：//www.echartsjs.com/zh/index.html
4. ECharts的基本使用
- 4.1 ECharts使用五部曲
  - 步骤一：下载并引用echarts.js文件
  - 步骤二：准备一个具备大小的DOM容器
  - 步骤三：初始化ECharts实例对象
  - 步骤四：指定配置和数据
  - 步骤五：将配置项设置给echarts实例对象
- 4.2 相关配置讲解
  - 查阅相关文档--配置项手册
    - title:标题组件
    - tooltip：提示框组件
    - legend：图例组件
    - toolbox：工具栏
    - grid：直角坐标系内绘图网格
    - xAxis：直角坐标系grid中的x轴
    - yAxis：直角坐标系grid中的y轴
    - series：系列列表。每个系列通过type决定自己的图表类型
      - type图表类型
      - name系列名称用于tooltip显示，legend的图例筛选变化
      - stack数据堆叠名称不同或删除不会堆叠
    - color：调色盘颜色列表