# echarts

**Repository Path**: widdo/echarts

## Basic Information

- **Project Name**: echarts
- **Description**: 大数据可视化之ECharts数据可视化
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-16
- **Last Updated**: 2026-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 大数据可视化

记录大数据可视化中`ECharts`相关部分的知识

<!-- 右上角 Fork 挂件 -->
<div align="right">

[![Fork me on Gitee](https://gitee.com/widdo/echarts/widgets/widget_1.svg)](https://gitee.com/widdo/echarts)

</div>

## 一、ECharts可视化

### 第2章 折线图和饼图

#### 2.1 常见的折线图

##### [任务 2.1.1 绘制基础折线图](./chapter02/2.1.1.line.html)-

- ![折线图预览](./chapter02/imgs/2.1.1.line.png)

##### [任务 2.1.2 绘制堆叠折线图](./chapter02/2.1.2.stackedLine.html)

- ![堆叠折线图预览](./chapter02/imgs/2.1.2.stackedLine.png)

##### [任务 2.1.3 绘制区域面积图](./chapter02/2.1.3.area.html)

- ![区域面积图预览](./chapter02/imgs/2.1.3.area.png)

##### [任务 2.1.4 绘制堆叠面积折线图](./chapter02/2.1.4.stackedArea_2.html)

- ![堆叠面积图预览](./chapter02/imgs/2.1.4.stackedArea_dataset.png)

##### [任务 2.1.5 绘制阶梯折线图](./chapter02/2.1.5.steppedLine.html)

- ![阶梯折线图预览](./chapter02/imgs/2.1.5.steppedLine.png)

##### [任务 2.1.6 绘制平滑曲线图](./chapter02/2.1.6.curve_dataset.html)

- ![平滑曲线图预览](./chapter02/imgs/2.1.6.curve.png)

### 2.2 常见的饼图

#### [任务 2.2.1 绘制基础饼图](./chapter02/2.2.1.pie.html)

- ![基础饼图预览](./chapter02/imgs/2.2.1.pie.png)

#### [任务 2.2.2 绘制南丁格尔图](./chapter02/2.2.2.rose.html)

- ![南丁格尔图预览](./chapter02/imgs/2.2.2.rose.png)

### 第3章 柱状图和散点图

#### 3.1 常见的柱状图

##### [任务 3.1.1 绘制基础柱状图](./chapter03/3.1.1%20bar.html)

- ![基础柱状图预览](./chapter03/imgs/3.1.1%20bar.png)

##### [任务 3.1.2 绘制堆叠柱状图](/chapter03/3.1.2%20stackedBar_dataset.html)

- ![堆叠柱状图预览](./chapter03/imgs/3.1.2%20stackedBar_dataset.png)

##### [任务 3.1.3 绘制阶梯瀑布图](./chapter03/3.1.3%20waterfallBar.html)

- ![阶梯瀑布图预览](./chapter03/imgs/3.1.3%20waterfallBar.png)

##### [任务 3.1.4 绘制堆叠条形图](./chapter03/3.1.4%20stackedStrip.html)

- ![堆叠条形图预览](./chapter03/imgs/3.1.4%20stackedStrip.png)

#### 3.2 常见的散点图

##### [任务 3.2.1 绘制基础散点图](./chapter03/3.2.1%20scatter.html)

- ![基础散点图预览](./chapter03/imgs/3.2.1%20scatter.png)

##### [任务 3.2.2 绘制带有涟漪动画的散点图](./chapter03/3.2.2%20effectScatter.html)

- ![带有涟漪动画的散点图预览](./chapter03/imgs/3.2.2%20effectScatter.png)

##### [任务 3.2.3 绘制气泡图](./chapter03/3.2.3%20bubbleScatter.html)

- ![气泡图预览](./chapter03/imgs/3.2.3%20bubbleScatter.png)

### 第4章 雷达图、如日图和关系图

#### 4.1 常见的雷达图

##### [任务 4.1.1 绘制基础雷达图](./chapter04/4.1.1%20radar.html)

- ![基础雷达图](./chapter04/imgs/4.1.1.png)

##### [任务 4.1.2 绘制自定义雷达图](./chapter04/4.1.2%20customRadar.html)

- ![自定义雷达图](./chapter04/imgs/4.1.2.png)

#### 4.2 常见的旭日图和关系图

##### [任务 4.2.1 绘制旭日图](./chapter04/4.2.1%20sunburst.html)

- ![绘制旭日图](./chapter04/imgs/4.2.1.png)

##### [任务 4.2.2 绘制圆角旭日图](./chapter04/4.2.2%20roundedSunburst.html)

- ![绘制圆角旭日图](./chapter04/imgs/4.2.2.png)

##### [任务 4.2.3 绘制关系图](./chapter04/4.2.3%20relation.html)

- ![绘制关系图](./chapter04/imgs/4.2.3.png)

---

### 第5章 仪表盘、漏斗图和折线树图

#### 5.1 常见的仪表盘

##### [任务 5.1.1 绘制进度仪表盘](./chapter05/5.1.1%20gauge.html)

- ![绘制进度仪表盘](./chapter05/imgs/5.1.1.png)

##### [任务 5.1.2 绘制时钟仪表盘](./chapter05/5.1.1%20gauge.html)

- ![绘制时钟仪表盘](./chapter05/imgs/5.1.2.png)

#### 5.2 常见的漏斗图和折线树图

##### [任务 5.2.1 绘制基础漏斗图](./chapter05/5.2.1%20funnel.html)

- ![绘制基础漏斗图](./chapter05/imgs/5.2.1.png)

##### [任务 5.2.2 绘制对比漏斗图](./chapter05/5.2.2%20multiFunnel.html)

- ![绘制对比漏斗图](./chapter05/imgs/5.2.2.png)

##### [任务 5.2.3 绘制折线树图](./chapter05/5.2.3%20tree.html)

- ![绘制对比漏斗图](./chapter05/imgs/5.2.3.png)

### 第6章 ECharts 的高级使用（上）

#### 6.1 ECharts 颜色主题

##### [任务 6.1.1 更改图表颜色主题](./chapter06/任务%206.1.1%20theme.html)

- ![更改图表颜色主题](./chapter06/imgs/6.1.1_1.png)

##### [任务 6.1.1 更改图表颜色主题](./chapter06/任务%206.1.1%20theme.html)

- ![更改图表颜色主题](./chapter06/imgs/6.1.1_2.png)

##### [任务 6.1.2 自定义图表颜色主题](./chapter06/任务%206.1.2%20line.html)

- ![自定义图表颜色主题](./chapter06/imgs/6.1.1_1.png)

#### 6.2 图表的混搭和多图表联动

##### [任务 6.2.1 更改图表颜色主题](./chapter06/任务%206.2.1%20water.html

- ![更改图表颜色主题](./chapter06/imgs/6.2.1.png)

##### [任务 6.2.2 柱状图和饼状图的混搭](./chapter06/任务%206.2.2%20echarts.html）

- ![柱状图和饼状图的混搭](./chapter06/imgs/6.2.2.png)

##### [任务 6.2.3 柱状图和饼状图的联动](./chapter06/任务%206.2.3%20flower.html）

- ![柱状图和饼状图的联动](./chapter06/imgs/6.2.3.png)

##### [任务 7.1.2 行为事件](./chapter07/任务%207.1.2%20pieHighlight.html)

- ![行为事件](./chapter07/img/7.1.2.png)

### 第7章 ECharts 的高级使用（下）

#### 7.1 事件与行为

##### [任务 7.1.1 鼠标事件](./chapter07/任务%207.1.1%20product.html)

- ![鼠标事件](./chapter07/img/7.1.1.png)

##### [任务 7.1.2 行为事件](./chapter07/任务%207.1.2%20pieHighlight.html)

- ![行为事件](./chapter07/img/7.1.2.png)

#### 7.2 数据异步加载与动画

##### [任务 7.2.1 异步加载图表的数据](./chapter07/任务%207.2.1%20subject.html)

- ![鼠标事件](./chapter07/img/7.2.1.png)

##### [任务 7.2.2 为图表设置动画](./chapter07/任务%207.2.2%20changeData_2.html)

- ![行为事件](./chapter07/img/7.2.2.png)

## 二、结果展示

#### 中国城市人口

![中国城市人口](./chapter03/imgs/地图.png)

#### 动画秀

![动画秀](./chapter03/imgs/动画秀.png)