echarts-for-react能讓react項目更好的使用echarts,使用方式也很簡單

首先，安裝

npm install --save echarts-for-react
npm install --save echarts

具體項目中的使用情況，很多同學采用下面這種比較簡單粗暴的方式，全部引用

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

但凡這么使用過的同學，應該都會發(fā)現(xiàn)，js包非常大，那么，我們該如何優(yōu)化呢，下面我會具體講下如何按需引用。官方給出的例子不夠詳細，我會舉幾個具體例子方便大家參考

案例一，餅圖，按需加載模塊

import React from 'react';
import ReactEcharts from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';

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

案例二，柱狀圖，按需加載模塊

import React from 'react';
import ReactEcharts from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';

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

案例三，中國地圖，按需加載模塊

import React from 'react';
import ReactEcharts from 'echarts-for-react/lib/core';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';
import 'echarts/map/js/china.js';

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

注意，如果再地圖中又使用了lines等還需要再引入 import 'echarts/lib/chart/line';