vue3+antd+g2plot快速入门

创建项目

pnpm create vite

选择vue和JavaScript

安装依赖

pnpm i ant-design-vue
pnpm i @antv/g2plot
pnpm i vue-router

完整代码

package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@antv/g2plot": "^2.4.31",
    "ant-design-vue": "^4.2.3",
    "vue": "^3.4.29",
    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }
}

src/main.js

import {createApp} from 'vue'

import Antd from 'ant-design-vue';
import router from './router';

import 'ant-design-vue/dist/reset.css';

import App from './App.vue'

const app = createApp(App)

app.use(Antd)
app.use(router)

app.mount('#app')

src/App.vue

<template>
  <RouterView/>
</template>

src/router/index.js

import {createWebHashHistory, createRouter} from 'vue-router'

import Layout from '../page/layout/index.vue'
import Home from '../page/home/index.vue'
import LineQuickStart from '../page/line/quick_start.vue'

const routes = [
    {
        path: '/',
        component: Layout,
        redirect: '/home',
        children: [
            {path: "/home", component: Home},
            {path: "/line/quickstart", component: LineQuickStart},
        ]
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router

src/page/layout/index.vue

<script setup>
import {ref} from 'vue';
import {useRouter} from "vue-router";

const router = useRouter()
const collapsed = ref(false);
const selectedKeys = ref(['1']);


const handleLeftMenuClick = ({item, key, keyPath}) => {
  console.log(item, key, keyPath)
  router.push(key)
}

</script>

<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="dark"
          mode="inline"
          @click="handleLeftMenuClick"
      >
        <a-menu-item key="home">
          <span>首页</span>
        </a-menu-item>
        <a-sub-menu key="line">
          <template #title>
            <span>
              <span>折线图</span>
            </span>
          </template>
          <a-menu-item key="/line/quickstart">快速入门</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="margin: 10px 16px">
        <div :style="{ padding: '24px', background: '#fff', minHeight: '460px' }">
          <RouterView/>
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        版权所有 © 2024 Python私教 张大鹏
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>

src/home/index.vue

<script setup>

</script>

<template>
home
</template>

<style scoped>

</style>

src/line/quick_start.vue

<script setup>
import {onMounted} from "vue";
import {Line} from "@antv/g2plot";

onMounted(() => {
  const 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},
  ];
  const line = new Line('container', {
    data,
    xField: 'year',
    yField: 'value',
  });
  line.render();
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>

</style>