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

在使用蚂蚁数据可视化图表库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;
})
}
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/html/antv-g2-chart-setting/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!