vue3中如何使用G2Plot

最新推荐文章于 2024-03-22 14:14:04 发布

陈可儿ckr

最新推荐文章于 2024-03-22 14:14:04 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_52772897/article/details/126302018

版权

vue 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

<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>