G2图表设置横坐标时间标签格式

2018-06-02 Views

在使用蚂蚁数据可视化图表库AntV的G2图表时，遇到一些搜寻了很久都解决不了的问题，比如本文的设置横坐标时间格式，在刚开始上手在Vue中使用G2遇到这个格式问题，查看了很多文档，最后发现一个小小的API的配置就搞定了。

知识点

'x': {
    type: 'time',
    mask: 'YYYY-MM-DD HH:mm:ss' //指定了横轴时间的格式 
}

完整示例

setCharts(list,usrs) {
    Promise.all([
        import('@antv/g2'),
        import('@antv/data-set')
    ]).then(([G2,DataSet]) => {
        /* 首先销毁之前的chart */
        this.chartObj && this.chartObj.destroy();
        const data = [...list];
        const ds = new DataSet();
        const dv = ds.createView().source(data);
        dv.transform({
            type: 'fold',
            fields: usrs, // 展开字段集
            key: 'bidder', // key字段
            value: 'bid', // value字段
        });
        const chart = new G2.Chart({
            container: 'chart',
            forceFit: true,
            height: 500
        });
        chart.source(dv, {
            'x': {
                type: 'time',
                mask: 'YYYY-MM-DD HH:mm:ss'
            },
            'bid': {
                type: 'linear',
                tickCount: 5
                // tickInterval: this.interval
            }
        });
        chart.tooltip({
            crosshairs: {
                type: 'line'
            },
            itemTpl: '<li data-index={index} style="margin-bottom: 4px;"><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}: '+ this.currency +' {value}</li>', // tooltip 每项记录的默认模板
        });
        chart.axis('bid', {
            line: {
                lineWidth: 1,
                stroke: '#ccc'
            },
            tickLine: {
                lineWidth: 1,
                length: 5,
                stroke: '#ccc'
            },
            label: {
                formatter: v => {
                    if (isNaN(v)){
                        return 0
                    }

                    if (v > 1e10){
                        return v/1e9 + 'B'
                    }
                    else if (v > 1e7){
                        return v/1e6 + 'M'
                    }
                    else if (v > 1e3){
                        return v/1000 + 'K'
                    }
                    return v
                }
            }
        });
        chart.line().tooltip('x*bid*bidder', (x,bid,bidder) => {
            return {
                name: bidder,
                value: monetization(bid)
            }
        }).position('x*bid').color('bidder').shape('smooth');
        chart.point().position('x*bid').color('bidder').size(4).shape('hollowCircle').style({
            // stroke: '#fff',
            lineWidth: 1
        });
        chart.render();
        this.chartObj = chart;
        this.dv = dv;
    })
}