Vue使用antV G2制作看板

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

工作中需要制作一个看板，选型选用antV G2进行开发。

由于项目前端是使用Vue，于是研究了antVG2在Vue中的使用。

1.安装antv/g2

在WebStrom下面Terminal中输入

npm install @antv/g2 --save

安装完成后为如下状态

2.创建一个Vue文件，引入antV/g2

import G2 from '@antv/g2';

3.创建一个函数，函数内部创建一个Chart对象，并在挂载时调用（这里我创建了两个函数，创建Chart对象所需的参数定义在data(){}中，后面会说）

test:function () {
const data = this.basicColumnChartProp.data;
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
container: this.basicColumnChartProp.container, // 指定图表容器 ID
width : this.basicColumnChartProp.width, // 指定图表宽度
height : this.basicColumnChartProp.height // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 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.width,
height:this.basicBarChartProp.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();
},

4.在data块中声明图表所需参数

data(){
return{
title:'地区货品跟进看板',
basicColumnChartProp:{
data:[{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 }],
container:'c1', //图表所绑定的div id
width:600,
height:300
},
basicBarChartProp:{
container:'mountNode', //图表所绑定的div id
width:500,
height:300,
data:[
{
country: '巴西',
population: 18203
}, {
country: '印尼',
population: 23489
}, {
country: '美国',
population: 29034
}, {
country: '印度',
population: 104970
}, {
country: '中国',
population: 131744
}
]
}
}
},

5.在模板<template>中创建div

<template>
<div>
<div><h1 style="color: white">{{title}}</h1></div>
<span>
<div id="c1"></div>
<div id="mountNode"></div>
</span>
</div>
</template>

6.我想将单个Vue组件的背景设置成黑色，这利用了两个钩子函数beforeCreate ()，beforeDestroy ()

beforeCreate () {
document.querySelector('body').setAttribute('style', 'background:#000000')
},
beforeDestroy () {
document.querySelector('body').removeAttribute('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:'地区货品跟进看板',
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: 创建 Chart 对象
const chart = new G2.Chart({
container: this.basicColumnChartProp.container, // 指定图表容器 ID
width : this.basicColumnChartProp.width, // 指定图表宽度
height : this.basicColumnChartProp.height // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 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>