antv/g2

Question

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()

因为这个数据是实时刷新的，这个怎么重新渲染啊

Answer 1

可以参考这个官方案例：
动态图表 | G2

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

changeData