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

一、项目介绍

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

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

柱状图

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

饼状图

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

折线图

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

img.png

二、教学目标

• 练习 React 项目如何渲染 ECharts 图表

• 练习使用折线图、柱状图、散点图、饼图、K线图等图表组件

• 练习 ECharts 中的行为和事件处理

• 如何自定义 ECharts 图表样式

三、前置技能

• React + Ant Design Pro

• ECharts 可视化图标基础

• React Router 页面路由

四、技能提升目标

• React + ECharts 了解 -> 熟悉

• ECharts API 配置项 了解 -> 熟悉

五、学习周期

总时长约 4 小时

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

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/

CodeSandbox 代码编辑

六、配套资料

• 5 分钟上手 ECharts - Apache ECharts

• ECharts 图表实例 - Apache ECharts (incubating)

• 在 React 中使用 ECharts 的多种方法

• hustcc/echarts-for-react: 一个 Apache echarts (incubating) 的 React 封装。