React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)
本文完整版:《React Echarts 使用教程 - 如何在 React 中加入图表(内附数据看板实战搭建案例)》
Ehcarts 作为数据展示的组件,应用场景丰富,所以在 React 里引入 Echarts 图表是每个前端必会技能。而 Echarts
配置项多且复杂,每个配置项都会细分很多个配置小项,并且还对外暴露了一套 API,包括图表实例,事件监听等,还是有一定的上手难度。
本文手把手教大家如何在 React
里使用 Echarts
,并结合实际使用场景,分享我是如何处理图表自适应等具体问题。 最后来一个实战教学,教大家如何结合 ant-design React UI 框架,开发企业级的「数字币走势数据看板」,帮助大家加深对 Echarts
的理解。
当然,如果你根本不想处理任何前端问题,就想专注在产品开发上,那么推荐使用卡拉云,卡拉云是新一代低代码开发工具,内置包括 Ehcarts 在内的多种常见的前端组件,拖拽即可生成,还可一键接入常见数据库及 API ,无需懂前端,快速搭建属于你自己的后台管理工具,一周工作量缩减至 1 天,详见本文文末。
如何在 React 里引入 Echarts
首先,我们需要初始化 React
项目,这里使用 create-react-app
即可轻松完成,以下两个命令都可以,是等价的:
初始化成功后,我们就可以在项目中安装 Echarts
,这里我们使用 Echarts
的最新版本:
安装好 Echarts
之后,我们就可以在项目中引入使用了。Echarts
支持两种引入方式:
全量引入
按需引入
这里为了简单起见,我们直接使用全局引入的方式即可。引入 echarts
后,我们先来实现一个折线+柱状图。
扩展阅读:《7 款最棒的开源 React 移动端 UI 组件库和模版框架》
React Echarts 实现折线图 + 柱状图
在 src 目录下,新建一个 components 文件夹,用来存放我们的图表组件,然后新建一个 LineBarChart.js,用来展现折线柱状图组件:
位置:src/components/LineBarChart.js
效果如下:
当然,如果你完全不想处理前端问题,直接在卡拉云拖拽一个图表组件,然后把 Echarts 代码直接贴进去就能生成图表。
当然,你也可以把做好的图表一键分享给同事使用,或嵌入在你自己的网页里,像下面这样。
以上就可以结合 React
,就可以实现一个简单的折线图、柱状图。了解更多折线图、柱状图等可看我们的 Echart 系列教程。
在本教程中,我挑两个重点讲一下,着重讲讲 series
,xAxis
这两个属性配置,series 表示一个系列的数据,type 表示系列类型;xAxis 表示 x 轴的数据。它们是一个数组,必须保持数据的有序性和一一对应,否则会出现数据错乱。Echart
的的主要 API
就是 setOption
,我们可以利用这个,封装一个通用的图表组件,还可以统一处理自适应,容错等问题。
扩展阅读:《最好的 6 个 React Table 组件详细亲测推荐》
React Echarts 封装通用图表组件
在 components 文件夹下新建 Chart.js
文件:
我在代码里做了详细的注释,方便大家理解。以上就实现了一个通用的图表组件,只需要传入 options
即可,我们来使用以下这个组件,修改 App.js
如下:
简单明了,效果如下:
封装通用组件的好处就是可以让我们更关注业务实现,不需要去关心底层图表具体的实现方式,后面我会给大家介绍如何使用卡拉云搭建图表系统,让我们只关注业务层,无需关心代码实现。
扩展阅读:《最好用的 5 款 React 富文本编辑器》
基于 Ant Design React 搭建数字币走势数据看板
本节我们使用国内最常用的 React UI 框架 Ant Design React 来手把手教大家搭一套极简版数字币走势数据看板,帮助大家加深理解 Echarts
。首先,我们需要安装 antd
作为项目的 UI
框架,然后还需要安装 axios
来发送请求获取数据,还需要 dayjs
方便我们处理日期:
安装成功后,在 index.js
导入 antd
的 样式文件
接下来就可以正式进入开发了,首先说明下我们要做的事情:
封装工具类,用来处理公共请求,日期等场景
实现一个趋势图组件,用来显示币种的价格走势
第一步,先封装一个工具类,在 src
目录下新建 utils
文件夹,然后新建 request.js
文件,用来处理请求发送:
这里是我申请的 API key
,大家直接使用就可以了,不是文章的重点。接着我们再新建一个文件 days.js
,用来处理日期范围相关的逻辑:
把上面的代码直接粘贴即可。然后我们还需要发送请求,所以在 src
目录下 新建 service
文件夹,新建一个 chartAPI.js
,统一存放我们要发送的请求 url:
创建完之后,就可以开始编写真正的渲染组件了,还记得第一节封装的通用图表组件吗,现在我们就可以直接使用这个组件了,在 components
下创建趋势图组件 LineBarChart.js
,用来展示单个趋势图:
以上代码编写完成后,还有最后一步,就是使用这个趋势图组件,修改 App.js
如下:
然后打开浏览器 http://localhost:3000,就可以看到最终效果了:
本文所有代码均在 github 可以找到。
扩展阅读:《React form 表单验证终极教程》
React Echarts 与卡拉云
本文详细讲解新版 React 中如何引入 Echarts。其实如果你根本不想处理复杂的前端问题,完全可以使用卡拉云来搭建数据看板,卡拉云内置包括 Echarts 在内的多种常用组件,无需懂任何前端,仅需拖拽即可快速生成,一键连接后端数据源,极速开发后台管理工具。
卡拉云可帮你快速搭建企业内部工具,下图为使用卡拉云搭建的内部广告投放监测系统,无需懂前端,仅需拖拽组件,10 分钟搞定。你也可以快速搭建一套属于你的后台管理工具,了解更多。
卡拉云是新一代低代码开发平台,与前端框架 Vue、React 等相比,卡拉云的优势在于不用首先搭建开发环境,直接注册即可开始使用。开发者完全不用处理任何前端问题,只需简单拖拽,即可快速生成所需组件,可一键接入常见数据库及 API,根据引导简单几步打通前后端,数周的开发时间,缩短至 1 小时。立即免费试用卡拉云。
扩展阅读:
版权声明: 本文为 InfoQ 作者【蒋川】的原创文章。
原文链接:【http://xie.infoq.cn/article/3bfa40193820ac31d3d7cba6d】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论