image.png
进入AntV官网后，我们选择G2。
安装AntV
cnpm install @antv/g2 --save
在home.vue里import G2 from '@antv/g2';
然后在export default里添加相应的样式即可。
export default {
mounted() {
const data = [
{ genre: "Sports", sold: 275 },
{ genre: "Strategy", sold: 115 },
{ genre: "Action", sold: 120 },
{ genre: "Shooter", sold: 350 },
{ genre: "Other", sold: 150 }
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
container: "c1", // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300 // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
.interval()
.position("genre*sold")
.color("genre");
// Step 4: 渲染图表
chart.render();
},
components: {
MyCard
}
};
最后就可以使用该图表了。
<div id="c1"></div>
效果图:
image.png
当我们要使用多个样式的时候，推荐把初始化图表的函数封装起来，如下图:
image.png
export default {
mounted() {
this.initc2();
this.initc1();
},
methods: {
initc2() {
const data = [
{ genre: "Sports", sold: 275 },
{ genre: "Strategy", sold: 115 },
{ genre: "Action", sold: 120 },
{ genre: "Shooter", sold: 350 },
{ genre: "Other", sold: 150 }
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
// Step 1: 创建 Chart 对象
const chart = new G2.Chart({
container: "c2", // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 400 // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart
.interval()
.position("genre*sold")
.color("genre");
// Step 4: 渲染图表
chart.render();
},
initc1() {
var data = [
{
year: "2001",
population: 41.8
},
{
year: "2002",
population: 38
},
{
year: "2003",
population: 33.7
},
{
year: "2004",
population: 30.7
},
{
year: "2005",
population: 25.8
},
{
year: "2006",
population: 31.7
},
{
year: "2007",
population: 33
},
{
year: "2008",
population: 46
},
{
year: "2009",
population: 38.3
},
{
year: "2010",
population: 28
},
{
year: "2011",
population: 42.5
},
{
year: "2012",
population: 30.3
}
];
var chart = new G2.Chart({
container: "c1",
height: 600,
width: 900
});
chart.source(data);
chart.coord("polar");
chart.legend({
position: "right",
offsetY: -window.innerHeight / 2 + 180,
offsetX: -140
});
chart.axis(false);
chart
.interval()
.position("year*population")
.color("year", G2.Global.colors_pie_16)
.style({
lineWidth: 1,
stroke: "#fff"
});
chart.render();
}
},
components: {
MyCard
}
};
然后再调用以下即可:
image.png
这里再次用到了iView提供的Raw布局。
<Row type="flex" justify="center" align="middle" class="code-row-bg">
<Col span="8">
<div id="c2"></div>
</Col>
<Col span="16">
<div id="c1"></div>
</Col>
</Row>
效果图:
image.png
