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