大家好,我是程序视点的小二哥!

前言

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

 

echarts-for-react插件可以在React中调用echarts接口直接渲染出Echarts图表,只要传入相关的参数和数据即可。

它让echart变得如此简单。再也不用自己封装echarts轮子了。有人把echarts轮子封装好了。

简介

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

 

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

安装

$ npm install --save echarts-for-react

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

使用

import React from 'react';
import ReactECharts from 'echarts-for-react';  // 或者 var ReactECharts = require('echarts-for-react');

<ReactECharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

注意:我们知道整个Echarts的体积是很大的。因此,我们在使用时,还是采用手动引入,以此来减低最后打包的体积。

官方根据Echarts的不同版本,给出了示例: Echarts.js V5:

import React from 'react';
// 引入核心库.
import ReactEChartsCore from 'echarts-for-react/lib/core';
// 引入核心模块, 提供使用echarts的必需接口.
import * as echarts from 'echarts/core';
// 按需引入,想必大家都明白
import {
  BarChart,
} from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,

  DatasetComponent,
} from 'echarts/components';
// 引入渲染器, 注意使用 Canvas 或者 SVG 渲染 也是必要的
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';

// 注册组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

// 组件使用
<ReactEChartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

Echarts.js v3 or v4:

import React from 'react';
// 引入原则和v5差不多,只是存在版本的差异。
import ReactEChartsCore from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

// 组件使用
<ReactEChartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

属性参数

  • 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注册主题:

// 引入echarts
import echarts from 'echarts';
...
// 注册主题
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// 渲染主题 
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  className='echarts-for-echarts'
  theme='my_theme' />

  • onChartReady 当图表准备好时,将图表作为参数传给回调函数。
  • loadingOption echarts的加载配置。
  • showLoading 是否加载动画效果
  • onEvents 为图表绑定事件
let onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
  option={this.getOption()}
  style={{height: '300px', width: '100%'}}
  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。

// 使用 ref
<ReactEcharts ref={(e) => { this.echarts_react = e; }}
  option={this.getOption()} />
 
// 通过 this.echarts_react获取`ReactEcharts`实例
 
let echarts_instance = this.echarts_react.getEchartsInstance();
// 接着就可以使用Echarts的API了。
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/

最后

【程序视点】助力打工人减负,从来不是说说而已!

后续小二哥会继续详细分享更多实用的工具和功能。持续关注,这样就不会错过之后的精彩内容啦!~

如果这篇文章对你有帮助的话,别忘了【一键三连】支持下哦~

 

posted on   程序视点  阅读(72)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示