antv G2在Vue中基本使用

装载数据 · 语雀

npm install @antv/g2 --save

V2

<div id="c1"></div>

import * as G2 from '@antv/g2'
 mounted (){
  this.chart = new G2.Chart({
  container: 'c1',
  width: 600,
  autoFit:true //自适应宽度 设置了true width会失效
padding:[20, 20, 20, 20] //折线图太高超出画布使用padding
  height: 300
});
this.chart.source(this.data);
this.chart.interval().position('genre*sold').color('genre')
this.chart.render();
}
   chart:null,
    data :[
  { genre: 'Sports', sold: 900 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
]

//数据修改后调用
this.chart.changeData(this.data)

V3

<div id="c1"></div>


import * as G2 from '@antv/g2'
onMounted(() => {
 chart.value = new G2.Chart({
  container: 'c1',
  width: 600,
  autoFit:true //自适应宽度 设置了true width会失效
  height: 300
});
chart.value.source(data);
chart.value.interval().position('genre*sold').color('genre')
chart.value.render();
})

const chart=ref()
const data=reactive([
{ genre: 'Sports', sold: 900 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }
])

//数据改变后调用
chart.value.changeData(data);