VisActor · xile611 · Apr 27, 2025 · Apr 24, 2025
diff --git a/packages/vchart/__tests__/runtime/browser/dashboard/chart1.ts b/packages/vchart/__tests__/runtime/browser/dashboard/chart1.ts
@@ -0,0 +1,20 @@
+import { VChart } from '../../../../src/index'; // 调整 VChart 的导入路径
+
+const barData = [
+  { type: 'Category A', value: 28 },
+  { type: 'Category B', value: 55 },
+  { type: 'Category C', value: 43 }
+];
+
+export function createChart1(domId: string, option: any) {
+  const spec = {
+    type: 'bar',
+    data: { values: barData },
+    padding: 5,
+    autoFit: true,
+    xField: 'type',
    yField: 'value',
+    title: { visible: true, text: 'Chart 1: Bar' }
+  };
+  new VChart(spec, { dom: domId, ...option }).renderAsync();
+}
diff --git a/packages/vchart/__tests__/runtime/browser/dashboard/chart2.ts b/packages/vchart/__tests__/runtime/browser/dashboard/chart2.ts
@@ -0,0 +1,22 @@
+import { VChart } from '../../../../src/index'; // 调整 VChart 的导入路径
+
+const lineData = [
+  { x: 'Mon', y: 120 },
+  { x: 'Tue', y: 200 },
+  { x: 'Wed', y: 150 },
+  { x: 'Thu', y: 80 },
+  { x: 'Fri', y: 70 }
+];
+
+export function createChart2(domId: string, option: any) {
+  const spec = {
+    type: 'line',
+    data: { values: lineData },
+    padding: 5,
+    autoFit: true,
+    xField: 'x',
+    yField: 'y',
+    title: { visible: true, text: 'Chart 2: Line' }
+  };
+  new VChart(spec, { dom: domId, ...option }).renderAsync();
+}
diff --git a/packages/vchart/__tests__/runtime/browser/dashboard/chart3.ts b/packages/vchart/__tests__/runtime/browser/dashboard/chart3.ts
@@ -0,0 +1,21 @@
+import { VChart } from '../../../../src/index'; // 调整 VChart 的导入路径
+
+const pieData = [
+  { item: 'Item 1', percent: 0.4 },
+  { item: 'Item 2', percent: 0.3 },
+  { item: 'Item 3', percent: 0.2 },
+  { item: 'Item 4', percent: 0.1 }
+];
+
+export function createChart3(domId: string, option: any) {
+  const spec = {
+    type: 'pie',
+    data: { values: pieData },
+    padding: 5,
+    autoFit: true,
+    categoryField: 'item',
+    valueField: 'percent',
+    title: { visible: true, text: 'Chart 3: Pie' }
+  };
+  new VChart(spec, { dom: domId, ...option }).renderAsync();
+}
diff --git a/packages/vchart/__tests__/runtime/browser/dashboard/chart4.ts b/packages/vchart/__tests__/runtime/browser/dashboard/chart4.ts
@@ -0,0 +1,26 @@
+import { VChart } from '../../../../src/index'; // 调整 VChart 的导入路径
+
+const radarData = [
+  { category: 10, value: 20, group: 0 },
+  { category: 20, value: 25, group: 0 },
+  { category: 30, value: 15, group: 0 },
+  { category: 40, value: 10, group: 0 },
+  { category: 10, value: 15, group: 1 },
+  { category: 20, value: 20, group: 1 },
+  { category: 30, value: 25, group: 1 },
+  { category: 40, value: 30, group: 1 }
+];
+
+export function createChart4(domId: string, option: any) {
+  const spec = {
+    type: 'radar',
+    data: { values: radarData },
+    padding: 5,
+    autoFit: true,
+    categoryField: 'category',
+    valueField: 'value',
+    seriesField: 'group',
+    title: { visible: true, text: 'Chart 4: Radar' }
+  };
+  new VChart(spec, { dom: domId, ...option }).renderAsync();
+}
diff --git a/packages/vchart/__tests__/runtime/browser/dashboard/chart5.ts b/packages/vchart/__tests__/runtime/browser/dashboard/chart5.ts
@@ -0,0 +1,23 @@
+import { VChart } from '../../../../src/index'; // 调整 VChart 的导入路径
+
+const areaData = [
+  { time: '2023-01', value: 100, type: 'A' },
+  { time: '2023-02', value: 120, type: 'A' },
+  { time: '2023-01', value: 80, type: 'B' },
+  { time: '2023-02', value: 90, type: 'B' }
+];
+
+export function createChart5(domId: string, option: any) {
+  const spec = {
+    type: 'area',
+    data: { values: areaData },
+    padding: 5,
+    autoFit: true,
+    xField: 'time',
+    yField: 'value',
+    seriesField: 'type',
+    stack: true,
+    title: { visible: true, text: 'Chart 5: Area' }
+  };
+  new VChart(spec, { dom: domId, ...option }).renderAsync();
+}
diff --git a/packages/vchart/__tests__/runtime/browser/dashboard/chart6.ts b/packages/vchart/__tests__/runtime/browser/dashboard/chart6.ts
@@ -0,0 +1,22 @@
+import { VChart } from '../../../../src/index'; // 调整 VChart 的导入路径
+
+const roseData = [
+  { type: 'Type A', value: 27 },
+  { type: 'Type B', value: 25 },
+  { type: 'Type C', value: 18 },
+  { type: 'Type D', value: 15 }
+];
+
+export function createChart6(domId: string, option: any) {
+  const spec = {
+    type: 'rose',
+    data: { values: roseData },
+    padding: 5,
+    autoFit: true,
+    categoryField: 'type',
+    valueField: 'value',
+    seriesField: 'type',
+    title: { visible: true, text: 'Chart 6: Rose' }
+  };
+  new VChart(spec, { dom: domId, ...option }).renderAsync();
+}
diff --git a/packages/vchart/__tests__/runtime/browser/index.html b/packages/vchart/__tests__/runtime/browser/index.html
@@ -5,28 +5,95 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta
       name="viewport"
-      content="width=device-width, 
-               initial-scale=1.0, 
-               maximum-scale=1.0, 
-               minimum-scale=1.0, 
+      content="width=device-width,
+               initial-scale=1.0,
+               maximum-scale=1.0,
+               minimum-scale=1.0,
                user-scalable=no"
     />
-    <title>Document</title>
+    <title>VChart Runtime Test</title>
 
     <style>
-      html {
+      html,
+      body {
         touch-action: pan-y;
         -webkit-text-size-adjust: 100%;
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column; /* 让按钮和图表容器垂直排列 */
+      }
+      #controlPanel {
+        padding: 10px;
+        background-color: #eee;
+        text-align: center;
+        flex-shrink: 0; /* 防止按钮区域被压缩 */
+      }
+      #chartContainer {
+        flex-grow: 1; /* 让图表容器填充剩余空间 */
+        position: relative; /* 确保内部绝对定位有效 */
+      }
+      /* 为 id="chart" 添加样式，使其填充 chartContainer */
+      #chart {
+        width: 100%;
+        height: 100%;
+        /* 可以添加一个边框以便调试时观察 */
+        /* outline
6DB6
: solid blue 1px; */
       }
     </style>
   </head>
 
-  <body style="margin: 0">
+  <body>
+    <!-- 添加控制面板和按钮 -->
+    <div id="controlPanel">
+      <button id="toggleScriptBtn">切换视图</button>
+    </div>
+
+    <!-- 图表将在此容器内创建 -->
     <div id="chartContainer">
-      <div id="mainLog"></div>
-      <div id="chart" style="outline: solid red 1px; width: 100%; height: 100%"></div>
-      <!-- <canvas id="canvas" width="500" height="500"></canvas> -->
+      <!-- 在 chartContainer 内部添加一个 id 为 chart 的 div -->
+      <!-- 这个 div 将被 index.page.local.ts 使用 -->
+      <!-- 当 index.page.dashboard.ts 加载时，其 setupLayout 会清空 chartContainer 的内容，所以这个 div 不会影响仪表盘视图 -->
+      <div id="chart"></div>
     </div>
+
+    <!-- 添加新的控制脚本 -->
+    <script type="module">
+      const params = new URLSearchParams(window.location.search);
+      const currentView = params.get('view') === 'dashboard' ? 'dashboard' : 'default';
+      const button = document.getElementById('toggleScriptBtn');
+
+      let scriptSrc;
+      let nextViewUrl;
+      let buttonText;
+
+      if (currentView === 'dashboard') {
+        scriptSrc = './index.page.dashboard.ts';
+        nextViewUrl = './index.html'; // 切换回默认视图
+        buttonText = '切换到默认视图 (单图)';
+      } else {
+        scriptSrc = './index.page.ts'; // 默认加载这个脚本
+        nextViewUrl = './index.html?view=dashboard'; // 切换到仪表盘视图
+        buttonText = '切换到仪表盘视图 (6图)';
+      }
+
+      // 设置按钮文本
+      button.textContent = buttonText;
+
+      // 添加按钮点击事件监听器
+      button.addEventListener('click', () => {
+        window.location.href = nextViewUrl;
+      });
+
+      // 动态创建并添加当前视图所需的脚本
+      const script = document.createElement('script');
+      script.type = 'module';
+      script.src = scriptSrc;
+      document.body.appendChild(script);
+
+      console.log(`Loading view: ${currentView}, script: ${scriptSrc}`);
+    </script>
   </body>
-  <script src="./index.page.ts" type="module"></script>
 </html>