全网React开发者下载量最高的 ECharts封装组件

大家好，我是程序视点的小二哥!
前言

echarts 是什么，不用多说了，国内最知名的可视化图表库之一。而今天要和大家分享的 echarts-for-react ，就是echarts的一个极简的 React 封装。
 

echarts-for-react插件可以在React中调用echarts接口直接渲染出Echarts图表，只要传入相关的参数和数据即可。
它让echart变得如此简单。再也不用自己封装echarts轮子了。有人把echarts轮子封装好了。
简介

可视化图表 echarts-for-react 是使用 React 基于 echarts 封装的图表库，能够满足基本的可视化图表需求。
 

它把 echarts 的配置参数通过 React 组件的 props 形式进行传递配置。代码简洁，功能适用。

安装

1. $ npm install --save echarts-for-react
3. # `echarts` 是 `echarts-for-react`的依赖，毕竟你封装的就是echarts嘛。选择自己熟悉的echarts版本进行安装。
4. $ npm install --save echarts

复制代码

使用

1. import React from 'react';
2. import ReactECharts from 'echarts-for-react';  // 或者 var ReactECharts = require('echarts-for-react');
4. <ReactECharts
5.   option={this.getOption()}
6.   notMerge={true}
7.   lazyUpdate={true}
8.   theme={"theme_name"}
9.   onChartReady={this.onChartReadyCallback}
10.   onEvents={EventsDict}
11.   opts={}
12. />

复制代码

注意：我们知道整个Echarts的体积是很大的。因此，我们在使用时，还是采用手动引入，以此来减低最后打包的体积。
官方根据Echarts的不同版本，给出了示例： Echarts.js V5：

1. import React from 'react';
2. // 引入核心库.
3. import ReactEChartsCore from 'echarts-for-react/lib/core';
4. // 引入核心模块, 提供使用echarts的必需接口.
5. import * as echarts from 'echarts/core';
6. // 按需引入，想必大家都明白
7. import {
8.   BarChart,
9. } from 'echarts/charts';
10. import {
11.   GridComponent,
12.   TooltipComponent,
14.   DatasetComponent,
15. } from 'echarts/components';
16. // 引入渲染器, 注意使用 Canvas 或者 SVG 渲染 也是必要的
17. import {
18.   CanvasRenderer,
19.   // SVGRenderer,
20. } from 'echarts/renderers';
22. // 注册组件
23. echarts.use(
24.   [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
25. );
27. // 组件使用
28. <ReactEChartsCore
29.   echarts={echarts}
30.   option={this.getOption()}
31.   notMerge={true}
32.   lazyUpdate={true}
33.   theme={"theme_name"}
34.   onChartReady={this.onChartReadyCallback}
35.   onEvents={EventsDict}
36.   opts={}
37. />

复制代码

Echarts.js v3 or v4:

1. import React from 'react';
2. // 引入原则和v5差不多，只是存在版本的差异。
3. import ReactEChartsCore from 'echarts-for-react/lib/core';
4. import echarts from 'echarts/lib/echarts';
5. import 'echarts/lib/chart/bar';
6. import 'echarts/lib/component/tooltip';
7. import 'echarts/lib/component/title';
9. // 组件使用
10. <ReactEChartsCore
11.   echarts={echarts}
12.   option={this.getOption()}
13.   notMerge={true}
14.   lazyUpdate={true}
15.   theme={"theme_name"}
16.   onChartReady={this.onChartReadyCallback}
17.   onEvents={EventsDict}
18.   opts={}
19. />

复制代码

属性参数

• option 这个是核心，是必须的。包含echarts图表的配置项和数据，如标题title、图例legend、x轴xAxis、y轴yAxis、series等，详见 http://echarts.baidu.com/option.html#title.
  
• notMerge 可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
  
• lazyUpdate 可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
  
• style 包含echarts图表的div的样式，默认是{height: '300px'}.
  
• className 包含echarts图表的div的类名. 可以根据需要自行配置类名，不同类配置不同的css。
  
• theme 应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 echarts.registerTheme 注册的主题名称。
  

通过registerTheme注册主题：

1. // 引入echarts
2. import echarts from 'echarts';
3. ...
4. // 注册主题
5. echarts.registerTheme('my_theme', {
6.   backgroundColor: '#f4cccc'
7. });
8. ...
9. // 渲染主题
10. <ReactEcharts
11.   option={this.getOption()}
12.   style={{height: '300px', width: '100%'}}
13.   className='echarts-for-echarts'
14.   theme='my_theme' />

复制代码

• onChartReady 当图表准备好时，将图表作为参数传给回调函数。
  
• loadingOption echarts的加载配置。
  
• showLoading 是否加载动画效果
  
• onEvents 为图表绑定事件
  

1. let onEvents = {
2.   'click': this.onChartClick,
3.   'legendselectchanged': this.onChartLegendselectchanged
4. }
5. ...
6. <ReactEcharts
7.   option={this.getOption()}
8.   style={{height: '300px', width: '100%'}}
9.   onEvents={onEvents} />

复制代码

• opts 附加参数。有下面几个可选项：
  

devicePixelRatio 设备像素比，默认取浏览器的值window.devicePixelRatio。
renderer 渲染器，支持 canvas 或者 svg渲染。
width 可显示指定实例宽度，单位为像素。如果传入值为 null或undefined或'auto'，则表示自动取 dom（实例容器）的宽度。
height 可显式指定实例高度，单位为像素。如果传入值为 null或undefined或'auto'，则表示自动取 dom（实例容器）的高度。
组件API和ECharts API

对于组件来说，只有一个API: getEchartsInstance()，用来获取Echarts的实例对象。获取到对象后就可以使用任意的Echarts API。

1. // 使用 ref
2. <ReactEcharts ref={(e) => { this.echarts_react = e; }}
3.   option={this.getOption()} />
5. // 通过 this.echarts_react获取`ReactEcharts`实例
7. let echarts_instance = this.echarts_react.getEchartsInstance();
8. // 接着就可以使用Echarts的API了。
9. let base64 = echarts_instance.getDataURL();

复制代码

使用这些API可以实现以下功能：

• 绑定/解绑事件
  
• 设置带有动态数据的动态图表
  
• 获取echarts dom/dataurl/base64，将图表保存到png。
  
• 发布图表
  

体验和建议 echarts-for-react同样延续了echarts官网的特色，提供了示例及代码，方便开发者查阅，提高开发效率。小伙伴们可以根据下方链接进行查阅。

echarts-for-react在线示例 https://git.hust.cc/echarts-for-react/

最后

【程序视点】助力打工人减负，从来不是说说而已！
后续小二哥会继续详细分享更多实用的工具和功能。持续关注，这样就不会错过之后的精彩内容啦！~
如果这篇文章对你有帮助的话，别忘了【一键三连】支持下哦~
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！