第九章 react中使用Echarts · react

# echarts-for-react #### 簡介使用echarts-for-react插件可以在React中調用echarts接口直接渲染出Echarts圖表，只要傳入相關的參數和數據即可。代碼簡介，功能使用。 #### 安裝 ~~~ 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 ~~~ #### DEMO演示 ~~~ git clone https://github.com/hustcc/echarts-for-react.git npm install npm start ~~~ ![](https://upload-images.jianshu.io/upload_images/2644925-c9fd32d9ad70a700.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp) demo效果 demo中可以看到各種不同類型的圖表，在項目開發過程中有需要可以查閱，copy相關的代碼，或者查看圖表的數據格式，了解圖表的相關功能，以便更好地引用及重構圖表。 #### 使用 ~~~ import * as React from "react"; import ReactEcharts from "echarts-for-react"; <ReactEcharts option={this.getOption()} notMerge={true} lazyUpdate={true} theme={"theme_name"} onChartReady={this.onChartReadyCallback} onEvents={EventsDict} opts={} /> ~~~ 也可手動導入echarts.js模塊以減小包大小 ~~~ 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'; <ReactEchartsCore echarts={echarts} option={this.getOption()} notMerge={true} lazyUpdate={true} theme={"theme_name"} onChartReady={this.onChartReadyCallback} onEvents={EventsDict} opts={} /> ~~~ #### 組件的參數簡介 * **`option`**(required, object) 這個是核心，是必須的，包含echarts圖表的配置項和數據，如標題title、圖例legend、提示框tooltip、x軸xAxis、y軸yAxis、series等，詳見[http://echarts.baidu.com/option.html#title](http://echarts.baidu.com/option.html#title). * **`notMerge`**(optional, object) 可選，是否不跟之前設置的 option 進行合并，默認為 false，即合并。 * **`lazyUpdate`**(optional, object) 可選，在設置完 option 后是否不立即更新圖表，默認為 false，即立即更新。 * **`style`**(optional, object) 包含echarts圖表的div的樣式，默認是{height: '300px'}. * **`className`**(optional, string) 包含echarts圖表的div的類名. 可以根據需要自行配置類名，不同類配置不同的css。 * **`theme`**(optional, string) 應用的主題。可以是一個主題的配置對象，也可以是使用已經通過[echarts.registerTheme](https://echarts.baidu.com/api.html#echarts.registerTheme)注冊的主題名稱。 (主題對象的格式樣例:[https://github.com/ecomfe/echarts/blob/master/theme/dark.js](https://github.com/ecomfe/echarts/blob/master/theme/dark.js)). 通過registerTheme注冊主題： ~~~ // 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) 當圖表準備好時，將圖表作為參數傳給回調函數 * **`loadingOption`**(optional, object) * **`showLoading`**(optional, bool, default: false) 是否加載動畫效果 * **`onEvents`**(optional, array(string=>function) ) 為圖表綁定事件 ~~~ let onEvents = { 'click': this.onChartClick, 'legendselectchanged': this.onChartLegendselectchanged } ... <ReactEcharts option={this.getOption()} style={{height: '300px', width: '100%'}} onEvents={onEvents} /> ~~~ 參見:[http://echarts.baidu.com/api.html#events](http://echarts.baidu.com/api.html#events) * **`opts`**(optional, object) 附加參數。有下面幾個可選項： > `devicePixelRatio` > 設備像素比，默認取瀏覽器的值`window.devicePixelRatio`。 > `renderer` > 渲染器，支持`'canvas'`或者`'svg'`。參見[使用 Canvas 或者 SVG 渲染](http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93)。 > `width` > 可顯式指定實例寬度，單位為像素。如果傳入值為`null`/`undefined`/`'auto'`，則表示自動取`dom`（實例容器）的寬度。 > `height` > 可顯式指定實例高度，單位為像素。如果傳入值為`null`/`undefined`/`'auto'`，則表示自動取`dom`（實例容器）的高度。 #### 組件API和ECharts API 對于組件來說，只有一個API——getEchartsInstance()，用來獲取Echarts的實例對象。獲取到對象后就可以使用任意的Echarts API。 ~~~ // render the echarts component below with rel <ReactEcharts ref={(e) => { this.echarts_react = e; }} option={this.getOption()} /> // then get the `ReactEcharts` use this.echarts_react let echarts_instance = this.echarts_react.getEchartsInstance(); // then you can use any API of echarts. let base64 = echarts_instance.getDataURL(); ~~~ Echarts的API請參見：[Echarts API](https://echarts.baidu.com/api.html#echartsInstance) 使用這些API可以實現以下功能： * 綁定/解綁事件 * 設置帶有動態數據的動態圖表 * 獲取echarts dom/dataurl/base64，將圖表保存到png。 * 發布圖表