在使用蚂蚁数据可视化图表库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]) => { 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', value: 'bid', }); 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 } }); 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>', }); 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({ lineWidth: 1 }); chart.render(); this.chartObj = chart; this.dv = dv; }) }
|