一，在vue原型中使用

1.首先安裝antv/g2

yarn add @antv/g2 --save

2.在main.js中掛在到vue原型實例中

const G2 = require(’@antv/g2’)Vue.prototype.$G2 = G2

3.在vue文件中可以直接在mounted生命周期中直接使用

<template> <div> <div id='c1'></div> </div></template><script>export default { mounted() { this.initComponent(); }, data() { return { msg: '', chart: null, data: [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 } ] }; }, methods: { initComponent() { const chart = new this.$G2.Chart({ container: 'c1', width: 600, height: 300 }); chart.source(this.data); chart .interval() .position('genre*sold') .color('genre'); this.chart = chart; this.chart.render(); } }};</script>

二，按需引用

1.還是安裝atv/g2

yarn add @antv/g2 --save

2.直接在組件中按需引入

<template> <div> <div id='l1'></div> </div></template><script>import { Chart } from '@antv/g2';export default { data() { return { year: [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 } ] }; }, mounted() { this.initLineChart() }, methods: { initLineChart() { const chart = new Chart({ container: 'l1', autoFit: true, height: 500 }); chart.data(this.year); chart.scale({ year: { range: [0, 1] }, value: { min: 0, nice: true } }); chart.tooltip({ showCrosshairs: true, // 展示 Tooltip 輔助線 shared: true }); chart .line() .position('year*value') .label('value'); chart.point().position('year*value'); chart.render(); } }};</script><style scoped></style>

示例代碼

<template> <div> <div><h1 style='color: white'>{{title}}</h1></div> <span> <div id='c1'></div> <div id='mountNode'></div> </span> </div></template><script> import G2 from ’@antv/g2’; export default { name: 'spectaculars', data(){ return{title:’地區(qū)貨品跟進看板’,basicColumnChartProp:{ data:[{ genre: ’Sports’, sold: 275 }, { genre: ’Strategy’, sold: 115 }, { genre: ’Action’, sold: 120 }, { genre: ’Shooter’, sold: 350 }, { genre: ’Other’, sold: 150 }], container:’c1’, width:600, height:300},basicBarChartProp:{ container:’mountNode’, size:{’width’:500,’height’:300}, data:[ { country: ’巴西’, population: 18203 }, { country: ’印尼’, population: 23489 }, { country: ’美國’, population: 29034 }, { country: ’印度’, population: 104970 }, { country: ’中國’, population: 131744 } ]} } }, methods:{ test:function () {const data = this.basicColumnChartProp.data;// Step 1: 創(chuàng)建 Chart 對象const chart = new G2.Chart({ container: this.basicColumnChartProp.container, // 指定圖表容器 ID width : this.basicColumnChartProp.width, // 指定圖表寬度 height : this.basicColumnChartProp.height // 指定圖表高度});// Step 2: 載入數(shù)據(jù)源chart.source(data);// Step 3：創(chuàng)建圖形語法，繪制柱狀圖，由 genre 和 sold 兩個屬性決定圖形位置，genre 映射至 x 軸，sold 映射至 y 軸chart.interval().position(’genre*sold’).color(’genre’)// Step 4: 渲染圖表chart.render(); }, basicBarChart:function () {let data = this.basicBarChartProp.data;let chart = new G2.Chart({ container: this.basicBarChartProp.container, width:this.basicBarChartProp.size.width, height:this.basicBarChartProp.size.height});chart.source(data);chart.axis(’country’, { label: { offset: 12 }});chart.coord().transpose();chart.interval().position(’country*population’);chart.render(); } }, mounted() { this.test(); this.basicBarChart(); }, beforeCreate () { document.querySelector(’body’).setAttribute(’style’, ’background:#000000’) }, beforeDestroy () { document.querySelector(’body’).removeAttribute(’style’) } }</script><style scoped></style>

到此這篇關于在Vue中使用antv的示例代碼的文章就介紹到這了,更多相關Vue中使用antv內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！