<template>
<!-- 1.先安装 npm install @antv/g2plot --save-->
<!-- 2.创建一个容器,要给容器设置大小,不设置的话是默认的大小-->
<div ref="container" style="height: 300px"></div>
</template>
<script>
//3.引入g2plot
import { Line } from '@antv/g2plot';
//引入ref(vue3是使用什么就得引入什么)
import {onMounted, ref} from 'vue';
export default {
name: "about",
setup() {
// 4.获取dom元素
const container = ref(null);
let linePlot = null;
let initChart = () => {
linePlot = new Line(container.value, {
data:[
{ 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 },
],
xField: 'year',
yField: 'value',
});
linePlot.render();
};
onMounted(initChart);
return {
container
}
}
}
</script>
<style scoped>
</style>