docs(docs): 修改demo docs

.github/workflows/build.yml

@@ -29,8 +29,8 @@ jobs:
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          GITHUB_TOKEN: ${{ secrets.PANDORALIBTOKEN }}
-          BRANCH: gh-pages
-          FOLDER: docs/.vitepress/dist
-          GIT_CONFIG_NAME: pandora-lib
-          COMMIT_MESSAGE: website deploy
+          token: ${{ secrets.PANDORALIBTOKEN }}
+          branch: gh-pages
+          folder: docs/.vitepress/dist
+          git_config_name: pandora-lib
+          commit_message: website deploy

docs/.vitepress/components/Demo.vue

@@ -97,10 +97,10 @@ const copyHandler = () => {
         v-if="demoInfo.describe"
         class="text-xs my-1 <sm:text-xs <sm:my-1"
         v-text="demoInfo.describe"
-      ></div>
+      />
       <!-- demo -->
       <div class="demo-component p-4px">
-        <component :is="demo"></component>
+        <component :is="demo" />
       </div>
       <div
         v-if="demoInfo.showCodeExample"
@@ -155,7 +155,7 @@ const copyHandler = () => {
   transition: opacity 250ms linear;
 }
 .demo-charts {
-  width: 500px;
+  width: 100%;
   height: 400px;
 }
 </style>

docs/.vitepress/config.ts

@@ -77,7 +77,6 @@ export default defineConfig({
   themeConfig: {
     logo: '/logo.png',
     nav: [{ text: '组件', link: '/zh-CN/components/' }],
-
     localeLinks: {
       text: '',
       items: [
@@ -90,7 +89,7 @@ export default defineConfig({
       '/en-US/components/': [
         {
           text: 'How to use',
-          collapsible: true,
+          // collapsible: true,
           items: [
             {
               text: 'Changelog',
@@ -110,7 +109,7 @@ export default defineConfig({
       '/zh-CN/components/': [
         {
           text: '使用',
-          collapsible: true,
+          // collapsible: true,
           items: [
             {
               text: '更新日志',

docs/.vitepress/theme/index.ts

@@ -4,9 +4,64 @@ import DemoWrapper from '../components/DemoWrapper.vue'
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import 'pandora-lib/pandora-lib.min.css'
-
+import * as core from 'echarts/core'
+import * as renderers from 'echarts/renderers'
+import * as charts from 'echarts/charts'
+import * as components from 'echarts/components'
 import type { Theme } from 'vitepress'
 
+const { use } = core
+const { CanvasRenderer } = renderers
+const {
+  BarChart,
+  LineChart,
+  LinesChart,
+  PieChart,
+  MapChart,
+  PictorialBarChart,
+  ScatterChart,
+  GraphChart,
+  GaugeChart,
+  EffectScatterChart,
+  RadarChart,
+} = charts
+const {
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  VisualMapComponent,
+  DataZoomComponent,
+  GraphicComponent,
+} = components
+
+use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  VisualMapComponent,
+  DataZoomComponent,
+  GraphicComponent,
+  LegendComponent,
+  BarChart,
+  LineChart,
+  LinesChart,
+  PieChart,
+  GraphChart,
+  MapChart,
+  ScatterChart,
+  PictorialBarChart,
+  GaugeChart,
+  EffectScatterChart,
+  RadarChart,
+  CanvasRenderer,
+])
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {

docs/vite.config.ts

@@ -13,4 +13,9 @@ export default {
     },
   },
   plugins: [MarkdownTransform(), Unocss()],
+  vite: {
+    ssr: {
+      noExternal: ['echarts', 'zrender', 'resize-detector'],
+    },
+  },
 }

package.json

@@ -77,7 +77,7 @@
     "@vue/runtime-core": "^3.2.36",
     "@vue/test-utils": "^2.0.0-rc.8",
     "@vue/vue3-jest": "^27.0.0",
-    "@vueuse/core": "^5.0.3",
+    "@vueuse/core": "8.2",
     "@vueuse/motion": "^1.5.6",
     "autoprefixer": "^10.2.5",
     "babel-jest": "^26.6.3",
@@ -133,7 +133,7 @@
     "vite-plugin-svg-icons": "2.0.1",
     "vite-plugin-svg-sprite": "^0.2.3",
     "vite-svg-loader": "4.0.0",
-    "vitepress": "1.0.0-beta.1",
+    "vitepress": "1.0.0-beta.7",
     "vitest": "^0.33.0",
     "vue": "3.3.4",
     "vue-eslint-parser": "^9.0.2",

packages/charts/README.zh-CN.md

@@ -16,7 +16,7 @@ Vue.creatApp().use(Charts.name, Charts)
 ## 案例
 
 :::demo  
-packages/Charts/demo/demo0.vue  
+packages/charts/demo/demo0.vue  
 :::
 
 ## props

packages/charts/__test__/index.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import Charts from '../index.vue'
+import Charts from '../src/index.vue'
 
 describe('Charts.vue', () => {
   test('render', () => {

packages/charts/demo/demo0.vue

@@ -4,21 +4,23 @@
       :options="opt"
       :data="echartData"
       :theme="theme"
+      chart-type="pie"
+      sub-chart-type="pie01"
       @zr:click="handleZrClick"
       @click="handleClick"
     />
   </div>
 </template>
 
 <script lang="ts">
-export default { name: 'ChartsDemo', title: '基本' }
+export default { name: 'ChartsDemo', title: 'Pie01' }
 </script>
 <script setup lang="ts">
 import Charts from 'pandora-lib/charts'
 import { ref } from 'vue'
 let opt: any = {}
 const charts: any = ref(null)
-const theme: any = ref('dark')
+const theme: any = ref('ovilia-green')
 const echartData = [
   {
     name: 'A类',

packages/charts/demo/demo1.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="demo-charts">
+    <Charts
+      ref="charts"
+      :data="echartData"
+      :options="opt"
+      chart-type="pie"
+      sub-chart-type="pie02"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default { name: 'ChartsDemo', title: 'Pie02' }
+</script>
+<script setup lang="ts">
+import Charts from 'pandora-lib/charts'
+import { ref } from 'vue'
+let opt: any = {}
+const charts: any = ref(null)
+const theme: any = ref('dark')
+const echartData = [
+  { value: '2879', name: '北京分中心' },
+  { value: '806', name: '上海分中心' },
+  { value: '723', name: '天津分中心' },
+  { value: '546', name: '宁夏分中心' },
+  { value: '454', name: '青岛分中心' },
+  { value: '344', name: '沈阳分中心' },
+  { value: '244', name: '新疆分中心' },
+]
+
+const handleZrClick = (...args: [any]) => {
+  console.log('click from zrender', ...args)
+}
+
+const handleClick = (...args: [any]) => {
+  console.log('click from echarts', ...args)
+}
+</script>

packages/charts/demo/index.vue

@@ -29,7 +29,9 @@
 
 <script lang="ts">
 import { createDemoModule } from '../../utils/index'
-const demos = import.meta.globEager('./demo*.vue')
+const demos = import.meta.globEager(
+  './charts/pie/demo*.vue'
+)
 
 export default createDemoModule(
   'Charts',