React＋Echarts简单的封装套路

Posted 2021-03-10 jobsofferings

今天我们来介绍一下React中，对Echarts的一个简单的封装。

首先在我们的React项目中，想使用Echart包，首先需要先安装它，安装代码如下，任选一个就可以

cnpm install echarts --save
npm install echarts --save
yarn add echarts --save

安装好之后，新建一个JS文件，命名test.js，首先导入的是各种依赖（总代码在文章结尾）

import React from ‘react‘;
import echarts from ‘echarts/lib/echarts‘;
import ‘echarts/lib/chart/bar‘;
import ‘echarts/lib/chart/line‘;
import ‘echarts/lib/component/tooltip‘;
import ‘echarts/lib/component/title‘;
import ‘echarts/lib/component/legend‘;
import ‘echarts/lib/component/toolbox‘;
import ‘echarts/lib/component/markPoint‘;
import ‘echarts/lib/component/markLine‘;

Echeart是需要对真实DOM进行渲染的，且必须用ID不能用className，所以在componentDidMount生命周期的时候，就需要get这个图表的id进行初始化，如：

let myChart = echarts.init(document.getElementById(‘myTable‘));

但是反过来想一想，当你需要多次使用该组件的时候，你会发现如果是固定id的时候会出现问题，因为id只能有一个，所以这里会有两种处理方式：

1、如果你习惯于在这个组件留下能操控的id，你可以在给这个组件传值的时候，传入一个id参数，这样可以自己手动保证id不重复，还能在组件外能CSS或JS操作这个图标。

let { id } = this.props.data;
let myChart = echarts.init(document.getElementById( id ? id : ‘myTable‘));

2、如果你不需要留下自己操作的id，可以使用随机的id，这样不用留神是否id重复的问题（以下代码已省略部分）

let getRandomID = () => Number(Math.random().toString().substr(4, 10) + Date.now()).toString(36)
let id = getRandomID();
class Test extends React.Component {
    componentDidMount() {
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        // 初始化
        let myChart = echarts.init(document.getElementById(id));
    render() {
        return (
            <div id={id}></div>
        );
    }
}

export default Test;

初始化完成后，使用图表是当然需要使用数据的，我们当然是不希望数据是只能固定一排或者两排的，所以我们应该在组件外传入不定量的数据，然后在组件中自动去初始化这个图表，这里我的传入数据有：图表标题、x轴名、y轴数据、y轴数据所对应的项目名、该图表的高度和宽度、id。以下就是我的组件代码：

import React from ‘react‘;
import echarts from ‘echarts/lib/echarts‘;
import ‘echarts/lib/chart/bar‘;
import ‘echarts/lib/chart/line‘;
import ‘echarts/lib/component/tooltip‘;
import ‘echarts/lib/component/title‘;
import ‘echarts/lib/component/legend‘;
import ‘echarts/lib/component/toolbox‘;
import ‘echarts/lib/component/markPoint‘;
import ‘echarts/lib/component/markLine‘;

const defaultType = ‘bar‘;
const defaultWidth = ‘100%‘;
const defaultHeight = ‘300px‘;
let getRandomID = () => Number(Math.random().toString().substr(4, 10) + Date.now()).toString(36)
let id = getRandomID();
class Test extends React.Component {
    componentDidMount() {
        window.addEventListener("resize", function () {
            myChart.resize();
        });
        // 初始化
        let { title, xdata, ydata, legend } = this.props.data;
        let myChart = echarts.init(document.getElementById(id));
        let series = [];
        for (let i = 0; i < ydata.length; i++) {
            let item = {
                name: legend[i],
                type: defaultType,
                data: ydata[i],
                markPoint: {
                    data: [
                        { type: ‘max‘, name: ‘最大值‘ },
                        { type: ‘min‘, name: ‘最小值‘ }
                    ]
                },
                markLine: {
                    data: [
                        { type: ‘average‘, name: ‘平均值‘ }
                    ]
                }
            }
            series.push(item)
        }
        // 绘制图表
        myChart.setOption({
            title: { text: title },
            tooltip: {
                trigger: ‘axis‘
            },
            legend: {
                data: legend
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: [‘line‘, ‘bar‘] },
                    restore: { show: true },
                    saveAsImage: {
                        show: true,
                        type: ‘jpg‘
                    }
                }
            },
            xAxis: [
                {
                    type: ‘category‘,
                    data: xdata
                }
            ],
            yAxis: [
                {
                    type: ‘value‘
                }
            ],
            series
        });
    }
    render() {
        let { width, height } = this.props.data;
        return (
            //默认高宽
            <div id={id} style={{ width: width ? width : defaultWidth, height: height ? height : defaultHeight }}></div>
        );
    }
}

export default Test;

这样封装好了之后，我们的调用就很舒服，无论是传几条数据在ydata里面都可以。

import React, { Component } from ‘react‘
import Test from ‘./Test‘

class All extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="all">
                    <Test data={{
                        id: ‘mainmain‘,
                        width: ‘100%‘,
                        height: ‘500px‘,
                        title: ‘某地区新增男孩人数、女孩人数和总人数‘,
                        xdata: [‘1月‘, ‘2月‘, ‘3月‘, ‘4月‘, ‘5月‘, ‘6月‘, ‘7月‘, ‘8月‘, ‘9月‘, ‘10月‘, ‘11月‘, ‘12月‘],
                        ydata: [[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        [4.6, 10.8, 16, 50, 54.3, 147.4, 311.2, 344.4, 81.3, 38.8, 12.4, 5.6]],
                        legend: [‘男孩‘, ‘女孩‘, ‘总人数‘]
                    }} />
            </div>
        )
    }
}

export default All

这是一个非常简单，但是实用的封装，不止是在Echarts，在很多其他的地方，大家都可以用到这么一套方法来封装自己的组件