共计 1450 个字符,预计需要花费 4 分钟才能阅读完成。
在 Vue 中使用 antv
使用 antv/g2(两种使用方式)
一,在 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>
正文完
发表至: javascript
2020-06-28