3.0.2 • Published 2 years ago

echarts-for-react v3.0.2

Weekly downloads
49,180
License
MIT
Repository
github
Last release
2 years ago

echarts-for-react

The simplest, and the best React wrapper for Apache ECharts.

npm Build Status Coverage NPM downloads License ECharts Ver React Ver

Install

$ 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 echarts

Then use it.

import ReactECharts from 'echarts-for-react';

// render echarts option.
<ReactECharts option={this.getOption()} />

You can run website.

$ git clone git@github.com:hustcc/echarts-for-react.git

$ npm install

$ npm start

Then open http://127.0.0.1:8081/ in your browser. or see https://git.hust.cc/echarts-for-react/ which is deploy on gh-pages.

Usage

Code of a simple demo code showed below. For more example can see: https://git.hust.cc/echarts-for-react/

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

<ReactECharts
  option={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:

import React from 'react';
// import the core library.
import ReactEChartsCore from 'echarts-for-react/lib/core';
// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';
// Import charts, all with Chart suffix
import {
  // 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 Component
import {
  // 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 step
import {
  CanvasRenderer,
  // SVGRenderer,
} from 'echarts/renderers';

// Register the required components
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);

// The usage of ReactEChartsCore are same with above.
<ReactEChartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

With Echarts.js v3 or v4:

import React from 'react';
// import the core library.
import ReactEChartsCore from 'echarts-for-react/lib/core';

// then import echarts modules those you have used manually.
import echarts from '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.
<ReactEChartsCore
  echarts={echarts}
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={}
/>

Props of Component

  • option (required, object)

the echarts option config, can see https://echarts.apache.org/option.html#title.

  • notMerge (optional, object)

when setOption, not merge the data, default is false. See https://echarts.apache.org/api.html#echartsInstance.setOption.

  • lazyUpdate (optional, object)

when setOption, lazy update the data, default is false. See https://echarts.apache.org/api.html#echartsInstance.setOption.

  • style (optional, object)

the style of echarts div. object, default is {height: '300px'}.

  • className (optional, string)

the class of echarts div. you can setting the css style of charts by class name.

  • theme (optional, string)

the theme of echarts. string, should registerTheme before use it (theme object format: https://github.com/ecomfe/echarts/blob/master/theme/dark.js). e.g.

// import echarts
import echarts from 'echarts';
...
// register theme object
echarts.registerTheme('my_theme', {
  backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactECharts
  option={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 the echarts object as it's paramter.

  • loadingOption (optional, object)

the echarts loading option config, can see https://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 the echarts event object, and the echart object as it's paramters. e.g:

const onEvents = {
  'click': this.onChartClick,
  'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactECharts
  option={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)

the opts of echarts. object, will be used when initial echarts instance by echarts.init. Document here.

<ReactECharts
  option={this.getOption()}
  style={{ height: '300px' }}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

Component API & Echarts API

the Component only has one API named getEchartsInstance.

  • getEchartsInstance() : get the echarts instance object, then you can use any API of echarts.

for example:

// render the echarts component below with rel
<ReactECharts
  ref={(e) => { this.echartRef = e; }}
  option={this.getOption()}
/>

// then get the `ReactECharts` use this.echarts_react

const echartInstance = this.echartRef.getEchartsInstance();
// then you can use any API of echarts.
const base64 = echartInstance.getDataURL();

About API of echarts, can see https://echarts.apache.org/api.html#echartsInstance.

You can use the API to do:

  1. binding / unbinding event.
  2. dynamic charts with dynamic data.
  3. get the echarts dom / dataURL / base64, save the chart to png.
  4. release the charts.

FAQ

How to render the chart with svg when using echarts 4.x

Use the props opts of component with renderer = 'svg'. For example:

<ReactECharts
  option={this.getOption()}
  style={{height: '300px'}}
  opts={{renderer: 'svg'}} // use svg to render the chart.
/>

How to resolve Error Component series.scatter3D not exists. Load it first.

Install and import echarts-gl module when you want to create a GL instance

npm install --save echarts-gl
import 'echarts-gl'
import ReactECharts from "echarts-for-react";

<ReactECharts
  option={GL_OPTION}
/>

LICENSE

MIT@hustcc.

dbn-ui-test-1@corva/ui@lethe0305/doc-leteh-repo@lethe0305/doc-repoacshb-react-common-nextreact-npm-libsop-cdmedith_li_testjdfinjdfin12jdfin16jdfin17jyswsdssdfdfdsafdtedsssswdswstencent_weatherer-prism-webkd-ui-libskdui-libslib-liberty-v-01lib-liberty-v-02lib-liberty-v-03lib-liberty-versionlibrary-liberty-version-0.0.1library-liberty-version-1.1.2shj-echarts-nexthotee-admingtm-clixh-common-pck@xinwangwang/react_echartsecharts-componentrxdskyline-businesscognitiveleap-corecognitiveleap-core-usgcw-lowcode-app-material@infinitebrahmanuniverse/nolb-echcontainer-data-analyticslazarus-cds@everything-registry/sub-chunk-1551@zhjcom/bizlinkcards-weblinksametoolskxcomhive-report-templatehiynn-designhit-react-uihongshen_first_blockhydrocarbon-client-moduleiamport-dashboardibuscloud-uiknowdesignkeerthana21-react-pattern-libkeywords-discover-graphkeywords-graphkosmos_autocurd_terminalkowalskikts-component-digital-assetkush-design-systemlargescreen-materialslark-introductionlcdp-enginelc-compsledger-analyticsimoocmanagerjdfin15jingqi-chart-materialnew-material-byfmodern-chart-viewmodupe-react-startermobx-testmobx-react-generatormunityappsinttelligentmy-test-cardnbugs-echartsnebula-viewnebula-chartsndp-editornbugs-web-echartsmyiotchartmyiotunittymyechartnet-chartsly-ycasp-tenant-uily-ycasp-tenantcard-uilyui-for-reactmid-end-comps-lib-charts-demomejiangh_mastermeix-react-uimeix-uimakuro-widgetloopring-weblowcode-compslowcode-chart-componentslowcode-hust-materiallowcode-iframelowcode-supplies-pls-commonming-npm-react-demoming-npm-react-echart-demoming-demo1
3.0.2

2 years ago

3.0.1

3 years ago

3.0.0

3 years ago

3.0.0-beta.2

3 years ago

3.0.0-beta.1

3 years ago

2.0.16

4 years ago

2.0.15-beta.1

5 years ago

2.0.15-beta.0

6 years ago

2.0.14

6 years ago

2.0.13

6 years ago

2.0.12

6 years ago

2.0.12-beta.0

6 years ago

2.0.11

6 years ago

2.0.10

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

7 years ago

1.4.4

7 years ago

1.4.3

7 years ago

1.4.3-alpha.1

7 years ago

1.4.2

7 years ago

1.4.1

7 years ago

1.4.0

7 years ago

1.3.5

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.7

7 years ago

1.1.6

7 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago