鍍金池/ 問答/HTML/ 在react項(xiàng)目中,怎么才能把dataComponent.js封裝成一個(gè)工具類,

在react項(xiàng)目中,怎么才能把dataComponent.js封裝成一個(gè)工具類,然后bar.js調(diào)用?

dataComponent.js

function () {

        return
            getSupportEvents: function () {
                return ['render', 'click', 'mouseup', 'mousedown', 'mousemove', 'mouseover', 'mouseout', 'optionChange'].concat(this._getSupportEvents());
            },
            _getSupportEvents: function () {
                return [];
            },
            /**
             * 最小高度
             * @type {number}
             */
            minHeight: 10,
            /**
             * 最小寬度
             * @type {number}
             */
            minWidth: 10,
            /**
             * 初始化
             * @param {string=} id
             * @param {Object} serialize
             * @returns {exports}
             * @private
             */
            _init: function (id, serialize) {
            }

};

bar.js

import DataComponent from './dataComponent'

// 配置
var CONFIG = {
    width: 900,
    height: 700,
    color: ['#106fe1']
};

// ECharts 配置
var defaultOptions = {
    // 標(biāo)題
    title: {
        text: '我的123'
    },
    tooltip: {},
    legend: { // 圖例
        data:['銷量']
    },
    xAxis: { // 直角坐標(biāo)系 grid 中的 x 軸
        data: ["襯衫12","羊毛衫35","雪紡衫67","褲子","高跟鞋","襪子"]
    },
    yAxis: {},
    series: [{
        name: '銷量123',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

/**
 * 加載數(shù)據(jù)
 * @param type
 * @param callback
 */

return DataComponent.extend({
    /**
    * 默認(rèn)容器的長與寬
    * @returns {*|{}}
    * @private
    */
    _getDefaultOptions: function () {
        return _.extend(true, this._super(), {
            width: 500,
            height: 500
        });
    },

    /**
     * 初始化 ECharts 的組件
     */
    initEChart: function () {
        console.log('初始化ECharts的組件')
    },

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

        // 克隆默認(rèn) 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();

    }

})
回答
編輯回答
護(hù)她命
2017年7月22日 09:01
編輯回答
蟲児飛

直接定義然后導(dǎo)出就好了:

const dataComponent = {
    getSupportEvents(){},
    //...
}
export default dataComponent
2018年1月2日 13:14