chore: 添加 vue 的使用示例 (#1837)

antvis · Sep 4, 2023 · 1fea0c1 · 1fea0c1
1 parent cba5702
commit 1fea0c1
Show file tree

Hide file tree

Showing 15 changed files with 343 additions and 0 deletions.
diff --git a/packages/f2-vue/examples/vite/.gitignore b/packages/f2-vue/examples/vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/f2-vue/examples/vite/README.md b/packages/f2-vue/examples/vite/README.md
@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
diff --git a/packages/f2-vue/examples/vite/index.html b/packages/f2-vue/examples/vite/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/f2-vue/examples/vite/package.json b/packages/f2-vue/examples/vite/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "vite",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@antv/f2": "^5.0.0",
+    "@antv/f-engine": "1.x",
+    "@antv/f-vue": "1.x",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@vitejs/plugin-vue": "^2.3.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "vite": "^2.9.7"
+  }
+}
diff --git a/packages/f2-vue/examples/vite/src/App.vue b/packages/f2-vue/examples/vite/src/App.vue
@@ -0,0 +1,61 @@
+<script lang='jsx'>
+import { toRaw } from 'vue';
+import Canvas from '@antv/f-vue';
+import { Chart, Interval, Axis } from '@antv/f2';
+import Grahpic from './graphic';
+
+const data1 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const data2 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 20 },
+  { genre: 'Shooter', sold: 50 },
+  { genre: 'Other', sold: 50 },
+];
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      year: '2021',
+      chartData: data1,
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.year = '2022';
+      this.chartData = data2;
+    }, 1000);
+  },
+  render() {
+    const { year, chartData } = this;
+    return (
+      <div className="container">
+        <Canvas pixelRatio={ window.devicePixelRatio }>
+          <Chart data={ toRaw(chartData) }>
+            <Grahpic year={ year } />
+            <Axis field="genre"/>
+            <Axis field="sold"/>
+            <Interval x="genre" y="sold" color="genre" />
+          </Chart>
+        </Canvas>
+      </div>
+    );
+  },
+};
+</script>
+
+<style>
+.container {
+  width: 500px;
+  height: 300px;
+}
+</style>
+
diff --git a/packages/f2-vue/examples/vite/src/graphic.jsx b/packages/f2-vue/examples/vite/src/graphic.jsx
@@ -0,0 +1,24 @@
+function View(props) {
+  const { coord, year } = props;
+  const { left, top, width, height } = coord;
+  const x = left + width / 2;
+  const y = top + height / 2;
+  return (
+    <group>
+      <text
+        attrs={{
+          x,
+          y,
+          text: year,
+          textAlign: 'center',
+          // textBaseline: 'bottom',
+          fontSize: '80px',
+          // fontWeight: 'bold',
+          fill: '#ddd',
+        }}
+      />
+    </group>
+  );
+}
+
+export default View;
diff --git a/packages/f2-vue/examples/vite/src/main.js b/packages/f2-vue/examples/vite/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/packages/f2-vue/examples/vite/vite.config.js b/packages/f2-vue/examples/vite/vite.config.js
@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { babel } from '@rollup/plugin-babel';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    babel({
+      plugins: [
+        [
+          '@babel/plugin-transform-react-jsx',
+          {
+            runtime: 'automatic',
+            importSource: '@antv/f-engine',
+          },
+        ],
+      ],
+    }),
+    vue(),
+    vueJsx(),
+  ],
+});
diff --git a/packages/f2-vue/examples/vue3/babel.config.js b/packages/f2-vue/examples/vue3/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};
diff --git a/packages/f2-vue/examples/vue3/package.json b/packages/f2-vue/examples/vue3/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "vue-3",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@antv/f2": "^5.0.0",
+    "@antv/f-engine": "1.x",
+    "@antv/f-vue": "1.x",
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-react-jsx": "~7.17.3",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0-0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "keywords": [],
+  "description": ""
+}
diff --git a/packages/f2-vue/examples/vue3/src/App.vue b/packages/f2-vue/examples/vue3/src/App.vue
@@ -0,0 +1,66 @@
+<script lang="jsx">
+import { toRaw } from 'vue';
+import Canvas from '@antv/f-vue';
+import { Chart, Interval, Axis, Tooltip } from '@antv/f2';
+import Grahpic from './graphic';
+
+const data1 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const data2 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 20 },
+  { genre: 'Shooter', sold: 50 },
+  { genre: 'Other', sold: 50 },
+];
+
+export default {
+  name: 'App',
+  data() {
+    return {
+      year: '2021',
+      chartData: data1,
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.year = '2022';
+      this.chartData = data2;
+    }, 1000);
+    setTimeout(() => {
+      this.year = '2021';
+      this.chartData = data1;
+    }, 3000);
+  },
+  render() {
+    const { year, chartData } = this;
+    return (
+      <div className="container">
+        <Canvas pixelRatio={ window.devicePixelRatio }>
+          <Chart data={ toRaw(chartData) }>
+            <Grahpic year={ year } />
+            <Axis field="genre"/>
+            <Axis field="sold"/>
+            <Interval x="genre" y="sold" color="genre" />
+            <Tooltip />
+          </Chart>
+        </Canvas>
+      </div>
+    );
+  },
+};
+</script>
+
+<style>
+.container {
+  width: 500px;
+  height: 300px;
+}
+</style>
+
diff --git a/packages/f2-vue/examples/vue3/src/graphic.jsx b/packages/f2-vue/examples/vue3/src/graphic.jsx
@@ -0,0 +1,24 @@
+function View(props) {
+  const { coord, year } = props;
+  const { left, top, width, height } = coord;
+  const x = left + width / 2;
+  const y = top + height / 2;
+  return (
+    <group>
+      <text
+        attrs={{
+          x,
+          y,
+          text: year,
+          textAlign: 'center',
+          // textBaseline: 'bottom',
+          fontSize: '80px',
+          // fontWeight: 'bold',
+          fill: '#ddd',
+        }}
+      />
+    </group>
+  );
+}
+
+export default View;
diff --git a/packages/f2-vue/examples/vue3/src/main.js b/packages/f2-vue/examples/vue3/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/packages/f2-vue/examples/vue3/vue.config.js b/packages/f2-vue/examples/vue3/vue.config.js
@@ -0,0 +1,24 @@
+module.exports = {
+  chainWebpack: (config) => {
+    config.module
+      .rule('F2')
+      .test((path) => {
+        // Only transform FEngine JSX in .jsx files.
+        return /\.jsx$/.test(path) && !/\.vue\.jsx$/.test(path);
+      })
+      .use('babel')
+      .loader('babel-loader')
+      .options({
+        plugins: [
+          [
+            '@babel/plugin-transform-react-jsx',
+            {
+              runtime: 'automatic',
+              importSource: '@antv/f-engine',
+            },
+          ],
+        ],
+      })
+      .end();
+  },
+};
diff --git a/packages/f2-vue/package.json b/packages/f2-vue/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@antv/f2-vue",
+  "private": true,
+  "version": "5.0.30",
+  "homepage": "https://github.com/antvis/f2",
+  "bugs": {
+    "url": "https://github.com/antvis/f2/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/antvis/f2"
+  },
+  "author": "https://github.com/orgs/antvis/people"
+}