- Notifications
You must be signed in to change notification settings - Fork656
⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
License
hustcc/echarts-for-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The simplest, and the best React wrapper forApache ECharts. Using visualization with MCP Servermcp-server-chart.
$ npm install --save echarts-for-react# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.$ npm install --save echartsThen use it.
importReactEChartsfrom'echarts-for-react';// render echarts option.<ReactEChartsoption={this.getOption()}/>
You can run website.
$ git clone git@github.com:hustcc/echarts-for-react.git$ npm install$ npm start
Then openhttp://127.0.0.1:8081/ in your browser. or seehttps://git.hust.cc/echarts-for-react/ which is deploy on gh-pages.
Code of a simple demo code showed below. For more example can see:https://git.hust.cc/echarts-for-react/
importReactfrom'react';importReactEChartsfrom'echarts-for-react';// or var ReactECharts = require('echarts-for-react');<ReactEChartsoption={this.getOption()}notMerge={true}lazyUpdate={true}theme={"theme_name"}onChartReady={this.onChartReadyCallback}onEvents={EventsDict}opts={}/>
Import ECharts.js modules manually to reduce bundle size
With Echarts.js v5 or v6:
importReactfrom'react';// import the core library.importReactEChartsCorefrom'echarts-for-react/lib/core';// Import the echarts core module, which provides the necessary interfaces for using echarts.import*asechartsfrom'echarts/core';// Import charts, all with Chart suffiximport{// LineChart,BarChart,// PieChart,// ScatterChart,// RadarChart,// MapChart,// TreeChart,// TreemapChart,// GraphChart,// GaugeChart,// FunnelChart,// ParallelChart,// SankeyChart,// BoxplotChart,// CandlestickChart,// EffectScatterChart,// LinesChart,// HeatmapChart,// PictorialBarChart,// ThemeRiverChart,// SunburstChart,// CustomChart,}from'echarts/charts';// import components, all suffixed with Componentimport{// GridSimpleComponent,GridComponent,// PolarComponent,// RadarComponent,// GeoComponent,// SingleAxisComponent,// ParallelComponent,// CalendarComponent,// GraphicComponent,// ToolboxComponent,TooltipComponent,// AxisPointerComponent,// BrushComponent,TitleComponent,// TimelineComponent,// MarkPointComponent,// MarkLineComponent,// MarkAreaComponent,// LegendComponent,// LegendScrollComponent,// LegendPlainComponent,// DataZoomComponent,// DataZoomInsideComponent,// DataZoomSliderComponent,// VisualMapComponent,// VisualMapContinuousComponent,// VisualMapPiecewiseComponent,// AriaComponent,// TransformComponent,DatasetComponent,}from'echarts/components';// Import renderer, note that introducing the CanvasRenderer or SVGRenderer is a required stepimport{CanvasRenderer,// SVGRenderer,}from'echarts/renderers';// Register the required componentsecharts.use([TitleComponent,TooltipComponent,GridComponent,BarChart,CanvasRenderer]);// The usage of ReactEChartsCore are same with above.<ReactEChartsCoreecharts={echarts}option={this.getOption()}notMerge={true}lazyUpdate={true}theme={"theme_name"}onChartReady={this.onChartReadyCallback}onEvents={EventsDict}opts={}/>
With Echarts.js v3 or v4:
importReactfrom'react';// import the core library.importReactEChartsCorefrom'echarts-for-react/lib/core';// then import echarts modules those you have used manually.importechartsfrom'echarts/lib/echarts';// import 'echarts/lib/chart/line';import'echarts/lib/chart/bar';// import 'echarts/lib/chart/pie';// import 'echarts/lib/chart/scatter';// import 'echarts/lib/chart/radar';// import 'echarts/lib/chart/map';// import 'echarts/lib/chart/treemap';// import 'echarts/lib/chart/graph';// import 'echarts/lib/chart/gauge';// import 'echarts/lib/chart/funnel';// import 'echarts/lib/chart/parallel';// import 'echarts/lib/chart/sankey';// import 'echarts/lib/chart/boxplot';// import 'echarts/lib/chart/candlestick';// import 'echarts/lib/chart/effectScatter';// import 'echarts/lib/chart/lines';// import 'echarts/lib/chart/heatmap';// import 'echarts/lib/component/graphic';// import 'echarts/lib/component/grid';// import 'echarts/lib/component/legend';import'echarts/lib/component/tooltip';// import 'echarts/lib/component/polar';// import 'echarts/lib/component/geo';// import 'echarts/lib/component/parallel';// import 'echarts/lib/component/singleAxis';// import 'echarts/lib/component/brush';import'echarts/lib/component/title';// import 'echarts/lib/component/dataZoom';// import 'echarts/lib/component/visualMap';// import 'echarts/lib/component/markPoint';// import 'echarts/lib/component/markLine';// import 'echarts/lib/component/markArea';// import 'echarts/lib/component/timeline';// import 'echarts/lib/component/toolbox';// import 'zrender/lib/vml/vml';// The usage of ReactEChartsCore are same with above.<ReactEChartsCoreecharts={echarts}option={this.getOption()}notMerge={true}lazyUpdate={true}theme={"theme_name"}onChartReady={this.onChartReadyCallback}onEvents={EventsDict}opts={}/>
ForNext.js user, code transpilation is needed. For Next.js 13.1 or higher, as allnext-transpile-modules features are natively built-in and the package has been deprecated, so please addtranspilePackages: ['echarts', 'zrender'] intonextConfig object:
// next.config.js/**@type {import('next').NextConfig} */constnextConfig={// ...existing properties,transpilePackages:['echarts','zrender'],}module.exports=nextConfig
For Next.js with version < 13.1:
// next.config.jsconstwithTM=require("next-transpile-modules")(["echarts","zrender"]);module.exports=withTM({})
option(required, object)
the echarts option config, can seehttps://echarts.apache.org/option.html#title.
notMerge(optional, object)
whensetOption, not merge the data, default isfalse. Seehttps://echarts.apache.org/api.html#echartsInstance.setOption.
replaceMerge(optional, string | string[])
whensetOption, default isnull. Seehttps://echarts.apache.org/api.html#echartsInstance.setOption.
lazyUpdate(optional, object)
whensetOption, lazy update the data, default isfalse. Seehttps://echarts.apache.org/api.html#echartsInstance.setOption.
style(optional, object)
thestyle of echarts div.object, default is {height: '300px'}.
className(optional, string)
theclass of echarts div. you can setting the css style of charts by class name.
theme(optional, string)
thetheme of echarts.string, shouldregisterTheme before use it (theme object format:https://github.com/ecomfe/echarts/blob/master/theme/dark.js). e.g.
// import echartsimportechartsfrom'echarts';...// register theme objectecharts.registerTheme('my_theme',{backgroundColor:'#f4cccc'});...// render the echarts use option `theme`<ReactEChartsoption={this.getOption()}style={{height:'300px',width:'100%'}}className='echarts-for-echarts'theme='my_theme'/>
onChartReady(optional, function)
when the chart is ready, will callback the function with theecharts object as it's paramter.
loadingOption(optional, object)
the echarts loading option config, can seehttps://echarts.apache.org/api.html#echartsInstance.showLoading.
showLoading(optional, bool, default: false)
bool, when the chart is rendering, show the loading mask.
onEvents(optional, array(string=>function) )
binding the echarts event, will callback with theecharts event object, andthe echart object as it's paramters. e.g:
constonEvents={'click':this.onChartClick,'legendselectchanged':this.onChartLegendselectchanged}...<ReactEChartsoption={this.getOption()}style={{height:'300px',width:'100%'}}onEvents={onEvents}/>
for more event key name, see:https://echarts.apache.org/api.html#events
opts(optional, object)
theopts of echarts.object, will be used when initial echarts instance byecharts.init. Documenthere.
<ReactEChartsoption={this.getOption()}style={{height:'300px'}}opts={{renderer:'svg'}}// use svg to render the chart./>
autoResize(optional, boolean)
decide whether to triggerthis.resize when window resize. default istrue.
the Component only hasone API namedgetEchartsInstance.
getEchartsInstance(): get the echarts instance object, then you can use anyAPI of echarts.
for example:
// render the echarts component below with rel<ReactEChartsref={(e)=>{this.echartRef=e;}}option={this.getOption()}/>// then get the `ReactECharts` use this.echarts_reactconstechartInstance=this.echartRef.getEchartsInstance();// then you can use any API of echarts.constbase64=echartInstance.getDataURL();
TypeScript anduseRef() example:
constgetOption=()=>{/** */};exportdefaultfunctionApp(){constechartsRef=useRef<InstanceType<typeofReactEcharts>>(null);useEffect(()=>{if(echartsRef.current){constechartsInstance=echartsRef.current.getEchartsInstance();// do somethingechartsInstance.resize();}},[]);return<ReactEchartsref={echartsRef}option={getOption()}/>;}
About API of echarts, can seehttps://echarts.apache.org/api.html#echartsInstance.
You can use the API to do:
binding / unbindingevent.dynamic chartswith dynamic data.- get the echarts dom / dataURL / base64, save the chart to png.
releasethe charts.
Use the propsopts of component withrenderer = 'svg'. For example:
<ReactEChartsoption={this.getOption()}style={{height:'300px'}}opts={{renderer:'svg'}}// use svg to render the chart./>
Install and importecharts-gl module when you want to create aGL instance
npm install --save echarts-gl
import'echarts-gl'importReactEChartsfrom"echarts-for-react";<ReactEChartsoption={GL_OPTION}/>
MIT@hustcc.
About
⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.