$ 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

import ReactECharts from 'echarts-for-react';// render echarts option.<ReactECharts option={this.getOption()} />

$ git clone [email protected]:hustcc/echarts-for-react.git$ npm install$ npm start

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 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 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.<ReactEChartsCore  echarts={echarts}  option={this.getOption()}  notMerge={true}  lazyUpdate={true}  theme={"theme_name"}  onChartReady={this.onChartReadyCallback}  onEvents={EventsDict}  opts={}/>

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={}/>

// import echartsimport echarts from 'echarts';...// register theme objectecharts.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' />

const onEvents = {  'click': this.onChartClick,  'legendselectchanged': this.onChartLegendselectchanged}...<ReactECharts  option={this.getOption()}  style={{ height: '300px', width: '100%' }}  onEvents={onEvents}/>

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

// render the echarts component below with rel<ReactECharts  ref={(e) => { this.echartRef = e; }}  option={this.getOption()}/>// then get the `ReactECharts` use this.echarts_reactconst echartInstance = this.echartRef.getEchartsInstance();// then you can use any API of echarts.const base64 = echartInstance.getDataURL();

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

npm install --save echarts-gl

import 'echarts-gl'import ReactECharts from "echarts-for-react";<ReactECharts  option={GL_OPTION}/>