实战项目三：ECharts 商品数据可视化
一、项目介绍
ECharts 可视化图标库现已加入 Apache 开源基金会，涵盖各种常用业务图表，本项目将练习如何使用 React 集成 ECharts 第三方图表库，通过对商品销售数据的可视化，学习如何直观地将数据展示在 Web 界面上，帮助你熟悉常用的 ECharts 图表。
任务 1：柱状图 - 可视化销售额数据
任务 2：饼状图 - 可视化销售额类别占比
任务 3：折线图 - 可视化客流量趋势
任务 4：地理坐标图 - 可视化销售地区分布
二、教学目标
练习 React 项目如何渲染 ECharts 图表
练习使用折线图、柱状图、散点图、饼图、K线图等图表组件
练习 ECharts 中的行为和事件处理
如何自定义 ECharts 图表样式
三、前置技能
React + Ant Design Pro
ECharts 可视化图标基础
React Router 页面路由
四、技能提升目标
React + ECharts 了解 -> 熟悉
ECharts API 配置项 了解 -> 熟悉
五、学习周期
总时长约 4 小时
准备好代码库，快来尝试一下！
当然，我还通过 CodeSandbox 的方式作为你的快速入口：https://codesandbox.io/s/github/JimmyLv/react-visualization (可能需要科学上网)
帮助你去除设置开发环境的障碍，一键打开 Cloud IDE 即可开始编码，右边则是你的网站运行效果预览，比如：https://react-visualization.jimmylv.now.sh/
六、配套资料
最后更新于
这有帮助吗？