React-redux开发之echarts组件封装

谈一下react开发如何使用echarts。

echarts是个好东西，很强大的配置功能，很多开发者都在使用它。那么在react里面如何去调用echarts？如何封装echarts呢？

react开发者，首先会想到的是上github搜索“react echarts”，然后找最多start的那个插件，比如“echarts-for-react”，那么，我们是不是真的有必要用插件来做呢？

带着上面这些疑问，下面我将一个个给大家解答开发中的一些体会。

1、是不是应该使用别人封装好的react-echarts插件？

这个答案没有绝对的标准，我觉得不需要第三方的react-echarts插件，使用echarts官方的插件即可实现我们需要的功能。

echarts很庞大，每种类型的图标都是一个单独的组件，还有各种小插件，比如label、title等，或许你应该看看这个教程：在webpack中使用echarts32

这个官方教程提到了一点很重要，为了避免我们引用过于庞大的echarts源文件，可以采用模块化加载的方式。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

2、如何在react中封装echarts组件？

react完完全全就是组件化开发，跟echarts可以很好的切合，以封装pie图为例。

a、我们首先要**新建一个pieReact.js文件**(你想用jsx或者ts为后缀也可以)。

b、添加基本的react组件模型，一个render方法，定义了一个div容器来展示canvas，style初始化容器的宽度和高度，如果不设置，就无法渲染canvas，这里用到了**ref来获取节点**，而不是id。

import React, { Component } from 'react';

export class PieReact extends React.Component {
    
    render() {
        return (
            <div className="pie-react">
                <div ref="pieReact" style={
     {width: "100%", height: "200px"}}></div>
            </div>
        )
    }
}

c、请问你安装好了echarts了吗？没有就请安装。

npm install echarts --save-dev

d、在pieReact组件中导入echarts，每个echarts小插件的导入方式可以参考：echarts组件导入方式