我想把bar.js文件改写成react组件的形式，请问我要如何修改？

Question

define(['require', '../dataComponent', '../../util/helper', 'echarts'], function (require, DataComponent, _, ECharts) {
    // 配置
    var CONFIG = {
        width: 900,
        height: 700,
        color: ['#106fe1']
    };

    // ECharts 配置
    var defaultOptions = {
        // 标题
        title: {
            text: '我的123'
        },
        tooltip: {},
        legend: { // 图例
            data:['销量']
        },
        xAxis: { // 直角坐标系 grid 中的 x 轴
            data: ["衬衫12","羊毛衫35","雪纺衫67","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量123',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    /**
     * 加载数据
     * @param type
     * @param callback
     */
    return DataComponent.extend({

        /**
         * 默认容器的长与宽
         * @returns {*|{}}
         * @private
         */
        _getDefaultOptions: function () {
            return _.extend(true, this._super(), {
                width: 500,
                height: 500
            });
        },

        /**
         * 初始化 ECharts 的组件
         */
        initEChart: function () {
            this.echart = ECharts.init(this.container); // 容器大小
            this.echart.setOption(this.defaultOptions);
        },

        /**
         * 初始化
         * @private
         */
        _init: function () {
            this._super.apply(this, arguments);

            // 克隆默认 ECharts 配置
            this.defaultOptions = _.clone(defaultOptions);
            // 初始化容器长与宽
            // _.css(this.container, 'width', CONFIG.width+'px');
            // _.css(this.container, 'height', CONFIG.height+'px');
            _.css(this.container, 'width', '900px');
            _.css(this.container, 'height', '900px');
            // 初始化 ECharts 的组件
            this.initEChart();

        },

    })
});