Echart4 自定義無數據時顯示內容

echart在老版本有nodata相關數據配置，但是到了4.x版本就被去除掉了，這裏簡單介紹一下如何借鑑loading註冊一個nodata的效果。

可以看到源碼有註冊loading的方法，官方並沒公開出來
registerLoading('default', loadingDefault);

 

借鑑修改   loadingDefault 來註冊一個新的loading，代碼如下：

var loadingNodata = function (api, opts) {
    opts = {
        text: '沒有數據',
        color: '#c23531',
        textColor: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
        zlevel: 0
    };
    var mask = new echarts.graphic.Rect({
        style: {
            fill: opts.maskColor
        },
        zlevel: opts.zlevel,
        z: 10000
    });

    var labelRect = new echarts.graphic.Rect({
        style: {
            fill: 'none',
            text: opts.text,
            textPosition: 'right',
            textDistance: 10,
            textFill: opts.textColor
        },
        zlevel: opts.zlevel,
        z: 10001
    });

    var group = new echarts.graphic.Group();

    group.add(labelRect);
    group.add(mask); // Inject resize

    group.resize = function () {
        var cx = api.getWidth() / 2;
        var cy = api.getHeight() / 2;
        labelRect.setShape({
            x: cx-20,
            y: cy-20,
            width: 10 * 2,
            height: 10 * 2
        });
        mask.setShape({
            x: 0,
            y: 0,
            width: api.getWidth(),
            height: api.getHeight()
        });
    };

    group.resize();
    return group;
};
echarts.registerLoading("nodatas", loadingNodata);

然後在無數據的時候使用。一定要記得重新加載數據時清理掉loading

 $statCharObj.hideLoading();

//do ..

if (!category.length) {
        $statCharObj.showLoading("nodatas");
    }