echarts非同步載入

看風景就發表於2018-05-02

echarts體積很大,在移動端使用非同步載入是一種提高渲染速度的方法,結合webpack的做法如下:

require.ensure([], function(require){
    const echarts = require('assets/js/lib/echarts.min');
    if(echarts){
        _self.fInitEcharts(echarts);
        if(_self.dateList.length && _self.rateList.length){
            _self.fSetEcharts();
        }
    }
},'echarts');

//初始化echarts
fInitEcharts(echarts) {
    var id = this.user.isInvest == 0 ? 'container' : 'container_invest';
    var dom = document.getElementById(id);
    this.myChart = echarts.init(dom);
}

//設定echart選項
fSetEcharts(){
    if(this.myChart){
        const size = fGetChartFontSize();
        const option = ...;
        this.myChart.setOption(option, true);
    }
}

 

相關文章