@opentiny/vue-docs 2.2.22 → 3.16.0

package/demos/pc/app/chart/scatter/base-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-scatter :data="chartData" :settings="chartSettings"></tiny-chart-scatter>
+    <tiny-chart-scatter :options="options"></tiny-chart-scatter>
   </div>
 </template>
 
@@ -8,17 +8,43 @@
 import { ref } from 'vue'
 import { ChartScatter as TinyChartScatter } from '@opentiny/vue'
 
-// 单维度多指标散点图示例
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '年龄'],
-  rows: [
-    { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-    { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-    { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
-    { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-    { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-    { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    orient: 'horizontal',
+    show: true,
+    position: {
+      left: 'center',
+      bottom: 15
+    }
+  },
+
+  // 气泡大小范围，默认值为[10，70]
+  // 气泡半径维度决定了气泡的大小，bubbleSize决定了气泡大小的上下限
+  bubbleSize: [20, 100],
+  xAxisType: 'value',
+  data: {
+    '1990': [
+      [28604, 77, 1709866, 'Australia', 1990],
+      [31163, 77.4, 27662440, 'Canada', 1990],
+      [60001, 68, 1154605773, 'China', 1990],
+      [13670, 74.7, 10582082, 'Cuba', 1990],
+      [28599, 75, 4986705, 'Finland', 1990]
+    ],
+    '2000': [
+      [19349, 69.6, 147568552, 'Russia', 2000],
+      [10670, 67.3, 53994606, 'Turkey', 2000],
+      [26424, 75.7, 57110117, 'United Kingdom', 2000],
+      [37062, 75.4, 252847810, 'United States', 2000],
+      [23038, 73.13, 143456918, 'Russia', 2000]
+    ],
+    '2015': [
+      [44056, 81.8, 23968976, 'Australia', 2015],
+      [43294, 81.7, 35939927, 'Canada', 2015],
+      [13334, 76.9, 1376048943, 'Cuba', 2015],
+      [21291, 78.5, 11389566, 'Finland', 2015],
+      [38923, 80.8, 5503457, 'France', 2015]
+    ]
+  }
 })
-const chartSettings = ref({})
 </script>

package/demos/pc/app/chart/scatter/base.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-scatter :data="chartData" :settings="chartSettings"></tiny-scatter>
+    <tiny-scatter :options="options"></tiny-scatter>
   </div>
 </template>
 
@@ -13,19 +13,45 @@ export default {
   },
   data() {
     return {
-      // 单维度多指标散点图示例
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '年龄'],
-        rows: [
-          { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-          { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-          { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
-          { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-          { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-          { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
-        ]
-      },
-      chartSettings: {}
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          orient: 'horizontal',
+          show: true,
+          position: {
+            left: 'center',
+            bottom: 15
+          }
+        },
+
+        // 气泡大小范围，默认值为[10，70]
+        // 气泡半径维度决定了气泡的大小，bubbleSize决定了气泡大小的上下限
+        bubbleSize: [20, 100],
+        xAxisType: 'value',
+        data: {
+          '1990': [
+            [28604, 77, 1709866, 'Australia', 1990],
+            [31163, 77.4, 27662440, 'Canada', 1990],
+            [60001, 68, 1154605773, 'China', 1990],
+            [13670, 74.7, 10582082, 'Cuba', 1990],
+            [28599, 75, 4986705, 'Finland', 1990]
+          ],
+          '2000': [
+            [19349, 69.6, 147568552, 'Russia', 2000],
+            [10670, 67.3, 53994606, 'Turkey', 2000],
+            [26424, 75.7, 57110117, 'United Kingdom', 2000],
+            [37062, 75.4, 252847810, 'United States', 2000],
+            [23038, 73.13, 143456918, 'Russia', 2000]
+          ],
+          '2015': [
+            [44056, 81.8, 23968976, 'Australia', 2015],
+            [43294, 81.7, 35939927, 'Canada', 2015],
+            [13334, 76.9, 1376048943, 'Cuba', 2015],
+            [21291, 78.5, 11389566, 'Finland', 2015],
+            [38923, 80.8, 5503457, 'France', 2015]
+          ]
+        }
+      }
     }
   }
 }

package/demos/pc/app/chart/scatter/demo2-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-scatter :data="chartData" :settings="chartSettings"></tiny-chart-scatter>
+    <tiny-chart-scatter :options="options"></tiny-chart-scatter>
   </div>
 </template>
 
@@ -8,35 +8,41 @@
 import { ref } from 'vue'
 import { ChartScatter as TinyChartScatter } from '@opentiny/vue'
 
-// 双维度多指标散点图示例
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '年龄'],
-  rows: {
-    上海: [
-      { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-      { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-      { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
-      { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-      { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-      { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    orient: 'horizontal',
+    show: true,
+    position: {
+      left: 'center',
+      bottom: 15
+    }
+  },
+
+  // 气泡大小范围，默认值为[10，70]
+  // 气泡半径维度决定了气泡的大小，bubbleSize决定了气泡大小的上下限
+  bubbleSize: [20, 100],
+  xAxisType: 'category',
+  yAxisNameL: 'Member',
+  data: {
+    'Bus': [
+      ['Q1', 70, 20, 'Q1', 'Bus'],
+      ['Q2', 80, 15, 'Q2', 'Bus'],
+      ['Q3', 200, 60, 'Q3', 'Bus'],
+      ['Q4', 160, 40, 'Q4', 'Bus']
     ],
-    北京: [
-      { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-      { 日期: '1/2', 访问用户: 1273, 年龄: 6, 下单用户: 2344 },
-      { 日期: '1/3', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-      { 日期: '1/4', 访问用户: 2123, 年龄: 9, 下单用户: 3245 },
-      { 日期: '1/5', 访问用户: 4103, 年龄: 12, 下单用户: 4355 },
-      { 日期: '1/6', 访问用户: 7123, 年龄: 10, 下单用户: 3567 }
+    'Car': [
+      ['Q1', 95, 30, 'Q1', 'Car'],
+      ['Q2', 120, 60, 'Q2', 'Car'],
+      ['Q3', 180, 40, 'Q3', 'Car'],
+      ['Q4', 230, 60, 'Q4', 'Car']
     ],
-    广州: [
-      { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-      { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-      { 日期: '1/3', 访问用户: 2123, 年龄: 30, 下单用户: 3245 },
-      { 日期: '1/5', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-      { 日期: '1/4', 访问用户: 5123, 年龄: 18, 下单用户: 4564 },
-      { 日期: '1/6', 访问用户: 3843, 年龄: 30, 下单用户: 4850 }
+    'Bicycle': [
+      ['Q1', 268, 50, 'Q1', 'Bicycle'],
+      ['Q2', 150, 36, 'Q2', 'Bicycle'],
+      ['Q3', 110, 20, 'Q3', 'Bicycle'],
+      ['Q4', 50, 40, 'Q4', 'Bicycle']
     ]
   }
 })
-const chartSettings = ref({})
 </script>

package/demos/pc/app/chart/scatter/demo2.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-scatter :data="chartData" :settings="chartSettings"></tiny-scatter>
+    <tiny-scatter :options="options"></tiny-scatter>
   </div>
 </template>
 
@@ -13,37 +13,43 @@ export default {
   },
   data() {
     return {
-      // 双维度多指标散点图示例
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '年龄'],
-        rows: {
-          上海: [
-            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-            { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-            { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
-            { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-            { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-            { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          orient: 'horizontal',
+          show: true,
+          position: {
+            left: 'center',
+            bottom: 15
+          }
+        },
+
+        // 气泡大小范围，默认值为[10，70]
+        // 气泡半径维度决定了气泡的大小，bubbleSize决定了气泡大小的上下限
+        bubbleSize: [20, 100],
+        xAxisType: 'category',
+        yAxisNameL: 'Member',
+        data: {
+          'Bus': [
+            ['Q1', 70, 20, 'Q1', 'Bus'],
+            ['Q2', 80, 15, 'Q2', 'Bus'],
+            ['Q3', 200, 60, 'Q3', 'Bus'],
+            ['Q4', 160, 40, 'Q4', 'Bus']
           ],
-          北京: [
-            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-            { 日期: '1/2', 访问用户: 1273, 年龄: 6, 下单用户: 2344 },
-            { 日期: '1/3', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-            { 日期: '1/4', 访问用户: 2123, 年龄: 9, 下单用户: 3245 },
-            { 日期: '1/5', 访问用户: 4103, 年龄: 12, 下单用户: 4355 },
-            { 日期: '1/6', 访问用户: 7123, 年龄: 10, 下单用户: 3567 }
+          'Car': [
+            ['Q1', 95, 30, 'Q1', 'Car'],
+            ['Q2', 120, 60, 'Q2', 'Car'],
+            ['Q3', 180, 40, 'Q3', 'Car'],
+            ['Q4', 230, 60, 'Q4', 'Car']
           ],
-          广州: [
-            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-            { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-            { 日期: '1/3', 访问用户: 2123, 年龄: 30, 下单用户: 3245 },
-            { 日期: '1/5', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-            { 日期: '1/4', 访问用户: 5123, 年龄: 18, 下单用户: 4564 },
-            { 日期: '1/6', 访问用户: 3843, 年龄: 30, 下单用户: 4850 }
+          'Bicycle': [
+            ['Q1', 268, 50, 'Q1', 'Bicycle'],
+            ['Q2', 150, 36, 'Q2', 'Bicycle'],
+            ['Q3', 110, 20, 'Q3', 'Bicycle'],
+            ['Q4', 50, 40, 'Q4', 'Bicycle']
           ]
         }
-      },
-      chartSettings: {}
+      }
     }
   }
 }

package/demos/pc/app/chart/scatter/demo3-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-scatter :data="chartData" :settings="chartSettings"></tiny-chart-scatter>
+    <tiny-chart-scatter :options="options"></tiny-chart-scatter>
   </div>
 </template>
 
@@ -8,38 +8,40 @@
 import { ref } from 'vue'
 import { ChartScatter as TinyChartScatter } from '@opentiny/vue'
 
-// 指标维度配置
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '年龄'],
-  rows: {
-    上海: [
-      { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-      { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-      { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
-      { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-      { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-      { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    orient: 'horizontal',
+    show: true,
+    position: {
+      left: 'center',
+      bottom: 15
+    }
+  },
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'], // 自定义颜色组，会循环使用该颜色组
+  yAxisName: 'Member',
+  data: {
+    '1990': [
+      [28604, 77, 1709866, 'Australia', 1990],
+      [31163, 77.4, 27662440, 'Canada', 1990],
+      [60001, 68, 1154605773, 'China', 1990],
+      [13670, 74.7, 10582082, 'Cuba', 1990],
+      [28599, 75, 4986705, 'Finland', 1990]
     ],
-    北京: [
-      { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-      { 日期: '1/2', 访问用户: 1273, 年龄: 6, 下单用户: 2344 },
-      { 日期: '1/3', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-      { 日期: '1/4', 访问用户: 2123, 年龄: 9, 下单用户: 3245 },
-      { 日期: '1/5', 访问用户: 4103, 年龄: 12, 下单用户: 4355 },
-      { 日期: '1/6', 访问用户: 7123, 年龄: 10, 下单用户: 3567 }
+    '2000': [
+      [19349, 69.6, 147568552, 'Russia', 2000],
+      [10670, 67.3, 53994606, 'Turkey', 2000],
+      [26424, 75.7, 57110117, 'United Kingdom', 2000],
+      [37062, 75.4, 252847810, 'United States', 2000],
+      [23038, 73.13, 143456918, 'Russia', 2000]
     ],
-    广州: [
-      { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-      { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-      { 日期: '1/3', 访问用户: 2123, 年龄: 30, 下单用户: 3245 },
-      { 日期: '1/5', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-      { 日期: '1/4', 访问用户: 5123, 年龄: 18, 下单用户: 4564 },
-      { 日期: '1/6', 访问用户: 3843, 年龄: 30, 下单用户: 4850 }
+    '2015': [
+      [44056, 81.8, 23968976, 'Australia', 2015],
+      [43294, 81.7, 35939927, 'Canada', 2015],
+      [13334, 76.9, 1376048943, 'Cuba', 2015],
+      [21291, 78.5, 11389566, 'Finland', 2015],
+      [38923, 80.8, 5503457, 'France', 2015]
     ]
   }
 })
-const chartSettings = ref({
-  dimension: '日期',
-  metrics: ['年龄', '下单用户']
-})
 </script>

package/demos/pc/app/chart/scatter/demo3.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-scatter :data="chartData" :settings="chartSettings"></tiny-scatter>
+    <tiny-scatter :options="options"></tiny-scatter>
   </div>
 </template>
 
@@ -13,39 +13,41 @@ export default {
   },
   data() {
     return {
-      // 指标维度配置
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '年龄'],
-        rows: {
-          上海: [
-            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-            { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-            { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
-            { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-            { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-            { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          orient: 'horizontal',
+          show: true,
+          position: {
+            left: 'center',
+            bottom: 15
+          }
+        },
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41', '#00aaee'], // 自定义颜色组，会循环使用该颜色组
+        yAxisName: 'Member',
+        data: {
+          '1990': [
+            [28604, 77, 1709866, 'Australia', 1990],
+            [31163, 77.4, 27662440, 'Canada', 1990],
+            [60001, 68, 1154605773, 'China', 1990],
+            [13670, 74.7, 10582082, 'Cuba', 1990],
+            [28599, 75, 4986705, 'Finland', 1990]
           ],
-          北京: [
-            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-            { 日期: '1/2', 访问用户: 1273, 年龄: 6, 下单用户: 2344 },
-            { 日期: '1/3', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
-            { 日期: '1/4', 访问用户: 2123, 年龄: 9, 下单用户: 3245 },
-            { 日期: '1/5', 访问用户: 4103, 年龄: 12, 下单用户: 4355 },
-            { 日期: '1/6', 访问用户: 7123, 年龄: 10, 下单用户: 3567 }
+          '2000': [
+            [19349, 69.6, 147568552, 'Russia', 2000],
+            [10670, 67.3, 53994606, 'Turkey', 2000],
+            [26424, 75.7, 57110117, 'United Kingdom', 2000],
+            [37062, 75.4, 252847810, 'United States', 2000],
+            [23038, 73.13, 143456918, 'Russia', 2000]
           ],
-          广州: [
-            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
-            { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
-            { 日期: '1/3', 访问用户: 2123, 年龄: 30, 下单用户: 3245 },
-            { 日期: '1/5', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
-            { 日期: '1/4', 访问用户: 5123, 年龄: 18, 下单用户: 4564 },
-            { 日期: '1/6', 访问用户: 3843, 年龄: 30, 下单用户: 4850 }
+          '2015': [
+            [44056, 81.8, 23968976, 'Australia', 2015],
+            [43294, 81.7, 35939927, 'Canada', 2015],
+            [13334, 76.9, 1376048943, 'Cuba', 2015],
+            [21291, 78.5, 11389566, 'Finland', 2015],
+            [38923, 80.8, 5503457, 'France', 2015]
           ]
         }
-      },
-      chartSettings: {
-        dimension: '日期',
-        metrics: ['年龄', '下单用户']
       }
     }
   }

package/demos/pc/app/chart/scatter/scatter.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { test, expect } from '../fixtures'
 
 test('base', async ({ page }) => {
   await page.goto('chart-scatter#scatter-base')
@@ -17,33 +17,3 @@ test('demo3', async ({ page }) => {
   const chart = page.locator('#scatter-demo3 .hui-chart')
   await expect(chart).toHaveScreenshot('demo3.png')
 })
-
-test('demo4', async ({ page }) => {
-  await page.goto('chart-scatter#scatter-demo4')
-  const chart = page.locator('#scatter-demo4 .hui-chart')
-  await expect(chart).toHaveScreenshot('demo4.png')
-})
-
-test('demo5', async ({ page }) => {
-  await page.goto('chart-scatter#scatter-demo5')
-  const chart = page.locator('#scatter-demo5 .hui-chart')
-  await expect(chart).toHaveScreenshot('demo5.png')
-})
-
-test('demo6', async ({ page }) => {
-  await page.goto('chart-scatter#scatter-demo6')
-  const chart = page.locator('#scatter-demo6 .hui-chart')
-  await expect(chart).toHaveScreenshot('demo6.png')
-})
-
-test('demo7', async ({ page }) => {
-  await page.goto('chart-scatter#scatter-demo7')
-  const chart = page.locator('#scatter-demo7 .hui-chart')
-  await expect(chart).toHaveScreenshot('demo7.png')
-})
-
-test('demo8', async ({ page }) => {
-  await page.goto('chart-scatter#scatter-demo8')
-  const chart = page.locator('#scatter-demo8 .hui-chart')
-  await expect(chart).toHaveScreenshot('demo8.png')
-})