if (this.MQJZDSMS.length < 7) {
for (let i = 0; i < 7 - this.MQJZDSMS.length; i++) {
this.MQJZDSMS.push({EmployeeName: '', BomQty: ''})
}
}
const data = this.MQJZDSMS
const chart = new G2.Chart({
container: 'container',
autoFit: true
})
chart.data(data)
var margin = 1 / data.length
var num = data[0].BomQty
for (let i = 0; i < data.length; i++) {
if (data[i].BomQty > num) {
num = data[i].BomQty
}
}
chart.scale({
BomQty: {
min: 0,
max: num + 500,
nice: true
},
EmployeeName: {
range: [0.02, 1 - margin / 2]
}
})
chart.tooltip({
showCrosshairs: true,
shared: true
})
chart.axis('EmployeeName', false)
chart.axis('BomQty', {
tickLine: {
length: 6
}
})
data.forEach((item) => {
chart.annotation().text({
position: [item.EmployeeName, item.BomQty],
content: item.BomQty,
style: {
fill: '#06b2d0',
textAlign: 'center'
},
offsetY: -10
})
})
chart.line().position('EmployeeName*BomQty').color('#4ff3f5')
chart.area().position('EmployeeName*BomQty').color('l(30) 0:#4ff3f5 1:#189da6')
chart.point().position('EmployeeName*BomQty')
chart.render()
因为这个数据是实时刷新的,这个怎么重新渲染啊
可以参考这个官方案例:
动态图表 | G2
已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。