关于echarts-for-react的按需引用

echarts-for-react能让react项目更好的使用echarts,使用方式也很简单

首先，安装

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

具体项目中的使用情况，很多同学采用下面这种比较简单粗暴的方式，全部引用

import ReactEcharts from 'echarts-for-react';
 
// render echarts option.

但凡这么使用过的同学，应该都会发现，js包非常大，那么，我们该如何优化呢，下面我会具体讲下如何按需引用。官方给出的例子不够详细，我会举几个具体例子方便大家参考

案例一，饼图，按需加载模块

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.

案例二，柱状图，按需加载模块

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.

案例三，中国地图，按需加载模块

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.

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