当前位置: 首页 > 工具软件 > G2Plot > 使用案例 >

vue3中如何使用G2Plot

葛霄
2023-12-01
<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>

 类似资料: