一. 邂逅 ECharts

1.认识`ECharts`

什么是Echarts：
- ECharts （全称 EnterpriseCharts ）是企业级数据图表。官方的解释是：一个基于JavaScript的开源可视化图表库
- ECharts可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等）
- ECharts底层依赖轻量级的ZRender图形库，可提供直观，生动，可交互，可高度个性化定制的数据可视化图表
ECharts的历史：
- ECharts由百度团队开源
- 2018年初，捐赠给Apache基金会，成为Apache软件基金会孵化级项目
- 2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业，成为Apache顶级项目
- 2021年1月28日，ECharts5 线上发布会举行

2.`ECharts`应用场景

ECharts应用场景：
- 智慧城市、园区、航运、公安、机房、监所、电力、物业、应急管理等多个领域的数据可视化展示

3.`ECharts` 的特点

丰富的图表类型
- 提供开箱即用的 20 多种图表和十几种组件，并且支持各种图表以及组件的任意组合
强劲的渲染引擎
- Canvas、SVG 双引擎一键切换，增量渲染等技术实现千万级数据的流畅交互
简单易容，上手容易
- 直接通过编写配置，便可以生成各种图表，并且支持多种集成方式
活跃的社区
- 活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同场景的需求
等等

二. `EChars5`初体验

1.初体验`ECharts`

集成Echarts的常见方式：
1. 通过npm获取 echarts：
  - npm install echarts --save
2. 通过jsDelivr等CDN引入
初体验Echarts（容器必须设高度）

2.`ECharts` 渲染原理

浏览器端的图表库大多会选择SVG或者Canvas进行渲染
ECharts 最开始时一直都是使用Canvas绘制图表。直到ECharts v4.0版本，才发布支持SVG渲染器，默认是canvas渲染器
SVG 和Canvas这两种使用方式在技术上是有很大的差异的，EChart能够做到同时支持，主要归功于ECharts底层库ZRender的抽象和实现
ZRender 是二维轻量级的绘图引擎，它提供Canvas、SVG、VML等多种渲染方式
因此，Echarts 可以轻松的互换SVG 渲染器和 Canvas 渲染器。切换渲染器只须在初始化图表时设置renderer参数为canvas
或svg即可

3.选择哪种渲染器

Canvas 更适合绘制图形元素数量较多的图表。如：热力图、炫光尾迹特效、地理坐标系、平行坐标系上的大规模线图等
SVG 具有重要的优势：它的内存占用更低、适配性、扩展性性好，放大缩小图表不会模糊
选择哪种渲染器？可以根据软硬件环境、数据量、功能需求综合考虑：
- 在软硬件环境较好，数据量不大的场景下，两种渲染器都可以适用，并不需要太多纠结
- 在软硬件环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：
  - 在需要创建很多ECharts实例且浏览器易崩溃的情况下（可能因为Canvas数量多导致内存占用超出手机承受能力），可以使用SVG渲染器来进行改善
  - 数据量较大（经验判断 > 1k）、较多交互时，建议选择Canvas渲染器

三. `ECharts` 组件和配置

1.认识`option`配置项( 组件 )

backgroundColor ：设置直角坐标系内绘图区域的背景
grid 选项：直角坐标系内绘图区域
yAxis 选项：直角坐标系grid中的y轴
xAxis 选项：直角坐标系grid中的x轴
title：图表的标题
legend：图例，展现了不同系列的标记、颜色和名字
tooltip：提示框
toolbox：工具栏，提供操作图表的工具
series：系列，配置系列图表的类型和图形信息数据
visualMap：视觉映射，可以将数据值映射到图形的形状、大小、颜色等
geo：地理坐标系组件。用于地图的绘制，支持在地理坐标系上绘制散点图，线集

2.`Grid`网格配置（组件）

grid 选项：直角坐标系内绘图区域
- show : 是否显示直角坐标系网格。 boolean类型
- left、right、top、bottom： grid 组件离容器左右上下的距离。 string | number类型
- containLabel：grid 区域是否包含坐标轴的刻度标签。 boolean类型
- backgroundColor： Color类型，网格背景色，默认透明

3.坐标系配置（组件）

xAxis 选项：直角坐标系grid中的x轴
- show ：是否显示x轴，boolean 类型
- name：坐标轴名称
- type ：坐标轴类型，string 类型
  - value 数值轴，适用于连续数据
  - category 类目轴，适用于离散的类目数据。类目数据可来源xAxis.data 、series.data 或 dataset.source 之一
- data：类目数据，在类目轴（type: 'category'）中有效，array 类型
- axisLine：坐标轴轴线相关设置，object 类型
- axisTick：坐标轴刻度相关设置，object 类型
- axisLabel：坐标轴刻度标签的相关设置，object 类型
- splitLine：坐标轴在grid区域中的分隔线，object 类型
- ...
yAxis 选项：直角坐标系grid中的y轴，参数基本和xAxis差不多

4.`series` 系列图配置（组件）

series：系列，配置系列图表的类型和图形信息数据。object[] 类型，每个object具体配置信息如下
- name：系列名称，用于tooltip的显示，legend 的图例筛选等
- type：指定系列图表的类型，比如：柱状图、折线图、饼图、散点图、地图等
- data：系列中的数值内容数组。数组中的每一项称为数据项
  - 一维数组: [ value ， value ] 。（一维数组是二维数组的简写）
  - 二维数组
    - [ [index, value ]， [index, value ] ] ，注意index从0开始
    - [ [*x*, y, value ]， [ *x*, y ， value ] ]，注意这里的x 和y可以表示x轴和y轴，也可以表示经度和纬度
  - 对象类型( 推荐 )。[ { value: x， name: x， label: { }，itemStyle:{}、 emphasis:{} .... } ]
- label：图形上的文本标签（就近原则，data中的比series优先级高）
- itemStyle：图形样式
- emphasis：高亮的图形样式和标签样式
- coordinateSystem：该系列使用的坐标系，默认值为二维的直角坐标系（笛卡尔坐标系）

5.`series` 高亮的样式(`emphasis`)

鼠标悬浮到图形元素上时，高亮的样式
- 默认情况高亮的样式是根据普通样式自动生成。但是也可自己定义
- 自定义主要是通过emphasis属性来定制
- emphsis 的结构和普通样式结构相同，如下图：
ECharts4以前，高亮和普通样式的写法，如下图
- 这种写法 仍然被兼容，但是不再推荐了
多数情况下，开发者只配置普通状态下的样式，让高亮的样式是根据普通样式自动生成

6.标题、图例、提示配置（组件）

title：图表的标题，object 类型
- text、top、left ...
legend：图例，展现了不同系列的标记、颜色和名字，object 类型
- show、icon、formatter、textStyle、itemWidth 、itemGap...
tooltip：提示框组件，object 类型
- show、 trigger、axisPointer ...

7.`Color` 和渐变色

ECharts中Color支持的格式：
- RGB、RGBA、关键字、十六进制格式
ECharts中的渐变色
- 线性渐变，前四个参数分别是（ x, y ）,（ x2, y2 ） 范围从 0 – 1
- 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变

四. `Echarts`图表实战

1.柱形图

ECharts 绘制柱状图

2.折线图

ECharts 绘制折线图

3.饼图

ECharts 绘制饼图

4.地图-绘制

ECharts 可以使用GeoJSON格式的数据作为地图的轮廓，可以获取第三方的GeoJSON数据注册到ECharts中：
- https://github.com/echarts-maps/echarts-china-cities-js/tree/master/js/shape-with-internal-borders
- https://datav.aliyun.com/portal/school/atlas/area_selector
ECharts绘制地图步骤（方式一）：
1. 拿到GeoJSON数据
2. 注册对应的地图的GeoJSON数据（调用setOption前注册）
3. 配置geo选项
ECharts绘制地图步骤（方式二）：
1. 拿到GeoJSON数据
2. 注册对应的地图的GeoJSON数据（调用setOption前注册）
3. 配置map series

5.`geo` 和 `map series`绘制地图的区别

geo地理坐标系组件
- 会生成一个geo地理坐标系组件
- 地理坐标系组件用于地图的绘制
- 支持在地理坐标系上绘制散点图，线集
- 该坐标系可以共其它系列复用
  - 注意：其他系列在复用该地理坐标系时，series的itemStyle等样式将不起作用
map series
- 默认情况下，map series 会自己生成内部专用的geo地理坐标系组件
- 地理坐标系组件用于地图的绘制
- 地图主要用于地理区域数据的可视化，配合data使用
- 配合visualMap组件用于展示不同区域的人口分布密度等数据

6.地图-着色

地图着色，可以通过itemStyle属性中的areaColor和borderColor属性
- areaColor ：地图区域的颜色
- borderColor：图形（边界）的描边颜色

7.地图-数据可视化

给地图添加数据，并可视化展示
- 添加一个map series
- 配置地图样式
- 添加地图所需的数据
- 添加visualMap视觉映射

8.地图-涟漪特效散点图

给地图添加涟漪特效的散点图数据，并可视化展示
- 添加一个effectScatter series
- 指定使用的地理坐标系
- 添加地图所需的数据
- 修改标记的大小和样式
- 修改默认的tooltip提示

五. `ECharts`其它补充

1.`Echarts` 常见 `API`

全局echarts对象，在script标签引入echarts.js文件后获得，或者在AMD环境中通过require('echarts')获得
- echarts.init( dom， theme， opts )：创建echartsInstance实例
- echarts.registerMap( mapName， opts )：注册地图
- echarts.getMap( mapName )：获取已注册地图
通过echarts.init创建的实例（echartsInstance）
- echartsInstance.setOption(opts)：设置图表实例的配置项以及数据，万能接口
- echartsInstance.getWidth()、 echartsInstance.getHeight()：获取ECharts实例容器的宽高度
- echartsInstance.resize(opts)：改变图表尺寸，在容器大小发生改变时需要手动调用
- echartsInstance.showLoading()、 echartsInstance.hideLoading()：显示和隐藏加载动画效果
- echartsInstance.dispatchAction()：触发图表行为，例如：图例开关、显示提示框showTip等
- echartsInstance.dispose：销毁实例，销毁后实例无法再被使用
- echartsInstance.on()：通过on方法添加事件处理函数，该文档描述了所有ECharts的事件列表

2.响应式`Echarts`图表

响应式图片的实现步骤：
1. 图表只设置高度，宽度设置为100% 或不设置
2. 监听窗口的resize事件，即监听窗口尺寸的变化（需节流）
3. 当窗口大小改变时，然后调用echartsInstance.resize改变图表的大小

另外需要注意的是：

在容器节点被销毁时，可以调用echartsInstance.dispose以销毁echarts实例释放资源，避免内存泄漏

  var myChart = echarts.init(document.getElementById('main'), null, {
    renderer: 'svg'
  })
  window.addEventListener('resize', () => {
    console.log('resize')
    myChart.resize({ height: '600px' })
  })

一. 邂逅 ECharts ​

1.认识ECharts ​

2.ECharts应用场景 ​

3.ECharts 的特点 ​

二. EChars5初体验 ​

1.初体验ECharts ​

2.ECharts 渲染原理 ​

3.选择哪种渲染器 ​

三. ECharts 组件和配置 ​

1.认识option配置项( 组件 ) ​

2.Grid网格配置 （组件） ​

3.坐标系配置（组件） ​

4.series 系列图配置（组件） ​

5.series 高亮的样式(emphasis) ​

6.标题、图例、提示配置（组件） ​

7.Color 和 渐变色 ​

四. Echarts图表实战 ​

1.柱形图 ​

2.折线图 ​

3.饼图 ​

4.地图-绘制 ​

5.geo 和 map series绘制地图的区别 ​

6.地图-着色 ​

7.地图-数据可视化 ​

8.地图-涟漪特效散点图 ​

五. ECharts其它补充 ​

1.Echarts 常见 API ​

2.响应式Echarts图表 ​

一. 邂逅 ECharts

1.认识`ECharts`

2.`ECharts`应用场景

3.`ECharts` 的特点

二. `EChars5`初体验

1.初体验`ECharts`

2.`ECharts` 渲染原理

3.选择哪种渲染器

三. `ECharts` 组件和配置

1.认识`option`配置项( 组件 )

2.`Grid`网格配置（组件）

3.坐标系配置（组件）

4.`series` 系列图配置（组件）

5.`series` 高亮的样式(`emphasis`)

6.标题、图例、提示配置（组件）

7.`Color` 和渐变色

四. `Echarts`图表实战

1.柱形图

2.折线图

3.饼图

4.地图-绘制

5.`geo` 和 `map series`绘制地图的区别

6.地图-着色

7.地图-数据可视化

8.地图-涟漪特效散点图

五. `ECharts`其它补充

1.`Echarts` 常见 `API`

2.响应式`Echarts`图表