# 实战项目三：ECharts 商品数据可视化

## 一、项目介绍

ECharts 可视化图标库现已加入 Apache 开源基金会，涵盖各种常用业务图表，本项目将练习如何使用 React 集成 ECharts 第三方图表库，通过对商品销售数据的可视化，学习如何直观地将数据展示在 Web 界面上，帮助你熟悉常用的 ECharts 图表。

### 任务 1：柱状图 - 可视化销售额数据

![柱状图](/files/-MQqeuOaN_qT4PJUl23f)

### 任务 2：饼状图 - 可视化销售额类别占比

![饼状图](/files/-MQqeuOb8-4V_kdUdA4Y)

### 任务 3：折线图 - 可视化客流量趋势

![折线图](/files/-MQqeuOcYHv_d6a_YpK7)

### 任务 4：地理坐标图 - 可视化销售地区分布

![img.png](/files/-MQqeuOdI-vrtJYu49gl)

## 二、教学目标

* 练习 React 项目[如何渲染 ECharts 图表](https://juejin.cn/post/6866029310533173255#heading-8)
* 练习使用折线图、柱状图、散点图、饼图、K线图等图表组件
* 练习 ECharts 中的行为和事件处理
* 如何自定义 ECharts [图表样式](https://echarts.apache.org/zh/tutorial.html#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F)

## 三、前置技能

* React + Ant Design Pro
* ECharts 可视化图标基础
* React Router 页面路由

## 四、技能提升目标

* React + ECharts 了解 -> 熟悉
* ECharts API 配置项 了解 -> 熟悉

## 五、学习周期

总时长约 4 小时

准备好代码库，快来尝试一下！

```bash
git clone https://github.com/JimmyLv/react-visualization.git
cd react-visualization

yarn install #安装依赖
yarn start #启动应用
```

当然，我还通过 CodeSandbox 的方式作为你的快速入口：<https://codesandbox.io/s/github/JimmyLv/react-visualization> (可能需要科学上网)

帮助你去除设置开发环境的障碍，一键打开 Cloud IDE 即可开始编码，右边则是你的网站运行效果预览，比如：<https://react-visualization.jimmylv.now.sh/>

{% embed url="<https://codesandbox.io/embed/github/JimmyLv/react-visualization?autoresize=1&fontsize=14&hidenavigation=1&theme=dark>" %}
CodeSandbox 代码编辑
{% endembed %}

[![Edit react-visualization](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/JimmyLv/react-visualization?fontsize=14\&hidenavigation=1\&theme=dark)

## 六、配套资料

* [5 分钟上手 ECharts - Apache ECharts](https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)
* [ECharts 图表实例 - Apache ECharts (incubating)](https://echarts.apache.org/examples/zh/index.html)
* [在 React 中使用 ECharts 的多种方法](https://juejin.cn/post/6866029310533173255#heading-8)
* [hustcc/echarts-for-react: 一个 Apache echarts (incubating) 的 React 封装。](https://github.com/hustcc/echarts-for-react)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jinglv.gitbook.io/react-in-actions/week-02/echarts-visualization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.