在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:echarts-for-react开源软件地址:https://gitee.com/hustcc/echarts-for-react开源软件介绍:echarts-for-reactThe simplest, and the best React wrapper for Apache ECharts. 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 [email protected]: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. UsageCode 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 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={}/> 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
the echarts option config, can see https://echarts.apache.org/option.html#title.
when
when
the
the
the // 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' />
when the chart is ready, will callback the function with the
the echarts loading option config, can see https://echarts.apache.org/api.html#echartsInstance.showLoading.
binding the echarts event, will callback with the 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
the <ReactECharts option={this.getOption()} style={{ height: '300px' }} opts={{renderer: 'svg'}} // use svg to render the chart./> Component API & Echarts APIthe Component only has
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_reactconst 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:
FAQHow to render the chart with svg when using echarts 4.xUse the props <ReactECharts option={this.getOption()} style={{height: '300px'}} opts={{renderer: 'svg'}} // use svg to render the chart./> How to resolve Error |
请发表评论