@opentiny/vue-docs 2.2.22 → 3.16.0

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
+    <tiny-funnel :options="options"></tiny-funnel>
   </div>
 </template>
 
@@ -13,20 +13,15 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['状态', '数值'],
-        rows: [
-          { 状态: '展示', 数值: 900 },
-          { 状态: '访问', 数值: 100 },
-          { 状态: '零', 数值: 0 },
-          { 状态: '点击', 数值: 300 },
-          { 状态: '订单', 数值: 200 }
+      options: {
+        maxSize: '80%',
+        minSize: '10%',
+        data: [
+          { value: 100, name: 'Show' },
+          { value: 75, name: 'Click' },
+          { value: 50, name: 'Visit' },
+          { value: 25, name: 'Order' }
         ]
-      },
-      // 自动按照数值排序并过滤0值
-      chartSettings: {
-        useDefaultOrder: true,
-        filterZero: true
       }
     }
   }

package/demos/pc/app/chart/funnel/demo4-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
+    <tiny-chart-funnel :options="options"></tiny-chart-funnel>
   </div>
 </template>
 
@@ -8,17 +8,30 @@
 import { ref } from 'vue'
 import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['状态', '数值'],
-  rows: [
-    { 状态: '展示', 数值: 900 },
-    { 状态: '访问', 数值: 600 },
-    { 状态: '点击', 数值: 300 },
-    { 状态: '订单', 数值: 100 }
+const options = ref({
+  gap: 10,
+  size: {
+    width: '80%',
+    height: '80%',
+    min: 0,
+    max: 100,
+    minSize: '0%',
+    maxSize: '100%'
+  },
+  position: {
+    left: 'center',
+    right: '80%',
+    top: 60,
+    bottom: 60,
+    funnelAlign: 'center',
+    orient: 'horizontal'
+  },
+
+  data: [
+    { value: 100, name: 'Show' },
+    { value: 75, name: 'Click' },
+    { value: 50, name: 'Visit' },
+    { value: 25, name: 'Order' }
   ]
 })
-// 定制顺序漏斗图
-const chartSettings = ref({
-  sequence: ['订单', '点击', '访问', '展示']
-})
 </script>

package/demos/pc/app/chart/funnel/demo4.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
+    <tiny-funnel :options="options"></tiny-funnel>
   </div>
 </template>
 
@@ -13,18 +13,30 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['状态', '数值'],
-        rows: [
-          { 状态: '展示', 数值: 900 },
-          { 状态: '访问', 数值: 600 },
-          { 状态: '点击', 数值: 300 },
-          { 状态: '订单', 数值: 100 }
+      options: {
+        gap: 10,
+        size: {
+          width: '80%',
+          height: '80%',
+          min: 0,
+          max: 100,
+          minSize: '0%',
+          maxSize: '100%'
+        },
+        position: {
+          left: 'center',
+          right: '80%',
+          top: 60,
+          bottom: 60,
+          funnelAlign: 'center',
+          orient: 'horizontal'
+        },
+        data: [
+          { value: 100, name: 'Show' },
+          { value: 75, name: 'Click' },
+          { value: 50, name: 'Visit' },
+          { value: 25, name: 'Order' }
         ]
-      },
-      // 定制顺序漏斗图
-      chartSettings: {
-        sequence: ['订单', '点击', '访问', '展示']
       }
     }
   }

package/demos/pc/app/chart/funnel/demo5-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
+    <tiny-chart-funnel :options="options"></tiny-chart-funnel>
   </div>
 </template>
 
@@ -8,17 +8,13 @@
 import { ref } from 'vue'
 import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['状态', '数值'],
-  rows: [
-    { 状态: '展示', 数值: 0.9 },
-    { 状态: '访问', 数值: 0.6 },
-    { 状态: '点击', 数值: 0.3 },
-    { 状态: '订单', 数值: 0.1 }
+const options = ref({
+  color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41'], // 自定义颜色组，循环使用该颜色组
+  data: [
+    { value: 100, name: 'Show' },
+    { value: 75, name: 'Click' },
+    { value: 50, name: 'Visit' },
+    { value: 25, name: 'Order' }
   ]
 })
-// 指定数据类型漏斗图
-const chartSettings = ref({
-  dataType: 'percent'
-})
 </script>

package/demos/pc/app/chart/funnel/demo5.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
+    <tiny-funnel :options="options"></tiny-funnel>
   </div>
 </template>
 
@@ -13,18 +13,14 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['状态', '数值'],
-        rows: [
-          { 状态: '展示', 数值: 0.9 },
-          { 状态: '访问', 数值: 0.6 },
-          { 状态: '点击', 数值: 0.3 },
-          { 状态: '订单', 数值: 0.1 }
+      options: {
+        color: ['#fa2a2d', '#ff7500', '#ffbf00', '#41ba41'], // 自定义颜色组，循环使用该颜色组
+        data: [
+          { value: 100, name: 'Show' },
+          { value: 75, name: 'Click' },
+          { value: 50, name: 'Visit' },
+          { value: 25, name: 'Order' }
         ]
-      },
-      // 指定数据类型漏斗图
-      chartSettings: {
-        dataType: 'percent'
       }
     }
   }

package/demos/pc/app/chart/funnel/demo6-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
+    <tiny-chart-funnel :options="options"></tiny-chart-funnel>
   </div>
 </template>
 
@@ -8,19 +8,19 @@
 import { ref } from 'vue'
 import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['状态', '数值'],
-  rows: [
-    { 状态: '展示', 数值: 0.9 },
-    { 状态: '访问', 数值: 0.6 },
-    { 状态: '点击', 数值: 0.3 },
-    { 状态: '订单', 数值: 0.1 }
+const options = ref({
+  legend: {
+    show: true,
+    icon: 'circle',
+    top: 'center',
+    left: '85%',
+    orient: 'vertical'
+  },
+  data: [
+    { value: 100, name: 'Show' },
+    { value: 75, name: 'Click' },
+    { value: 50, name: 'Visit' },
+    { value: 25, name: 'Order' }
   ]
 })
-// 修改legend别名漏斗图
-const chartSettings = ref({
-  legendName: {
-    订单: '订单 total:1000'
-  }
-})
 </script>

package/demos/pc/app/chart/funnel/demo6.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
+    <tiny-funnel :options="options"></tiny-funnel>
   </div>
 </template>
 
@@ -13,20 +13,20 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['状态', '数值'],
-        rows: [
-          { 状态: '展示', 数值: 0.9 },
-          { 状态: '访问', 数值: 0.6 },
-          { 状态: '点击', 数值: 0.3 },
-          { 状态: '订单', 数值: 0.1 }
+      options: {
+        legend: {
+          show: true,
+          icon: 'circle',
+          top: 'center',
+          left: '85%',
+          orient: 'vertical'
+        },
+        data: [
+          { value: 100, name: 'Show' },
+          { value: 75, name: 'Click' },
+          { value: 50, name: 'Visit' },
+          { value: 25, name: 'Order' }
         ]
-      },
-      // 修改legend别名漏斗图
-      chartSettings: {
-        legendName: {
-          订单: '订单 total:1000'
-        }
       }
     }
   }

package/demos/pc/app/chart/funnel/demo7-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-funnel :data="chartData" :settings="chartSettings"></tiny-chart-funnel>
+    <tiny-chart-funnel :options="options"></tiny-chart-funnel>
   </div>
 </template>
 
@@ -8,17 +8,29 @@
 import { ref } from 'vue'
 import { ChartFunnel as TinyChartFunnel } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['状态', '数值'],
-  rows: [
-    { 状态: '展示', 数值: 900 },
-    { 状态: '访问', 数值: 600 },
-    { 状态: '点击', 数值: 300 },
-    { 状态: '订单', 数值: 100 }
+const options = ref({
+  tipHtml: (params, ticket, callback) => {
+    let htmlString =
+      'div' +
+      '<span style="display:inline-block;min-width:50px;">名称: </span>' +
+      '<span style="font-weight:bold">' +
+      params.name +
+      '</span>' +
+      '</div>'
+    htmlString +=
+      'div' +
+      '<span style="display:inline-block;min-width:50px;">百分比: </span>' +
+      '<span style="font-weight:bold">' +
+      params.value +
+      '</span>' +
+      '</div>'
+    return htmlString
+  },
+  data: [
+    { value: 100, name: 'Show' },
+    { value: 75, name: 'Click' },
+    { value: 50, name: 'Visit' },
+    { value: 25, name: 'Order' }
   ]
 })
-// 金字塔
-const chartSettings = ref({
-  ascending: true
-})
 </script>

package/demos/pc/app/chart/funnel/demo7.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-funnel :data="chartData" :settings="chartSettings"></tiny-funnel>
+    <tiny-funnel :options="options"></tiny-funnel>
   </div>
 </template>
 
@@ -13,18 +13,30 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['状态', '数值'],
-        rows: [
-          { 状态: '展示', 数值: 900 },
-          { 状态: '访问', 数值: 600 },
-          { 状态: '点击', 数值: 300 },
-          { 状态: '订单', 数值: 100 }
+      options: {
+        tipHtml: (params, ticket, callback) => {
+          let htmlString =
+            'div' +
+            '<span style="display:inline-block;min-width:50px;">名称: </span>' +
+            '<span style="font-weight:bold">' +
+            params.name +
+            '</span>' +
+            '</div>'
+          htmlString +=
+            'div' +
+            '<span style="display:inline-block;min-width:50px;">百分比: </span>' +
+            '<span style="font-weight:bold">' +
+            params.value +
+            '</span>' +
+            '</div>'
+          return htmlString
+        },
+        data: [
+          { value: 100, name: 'Show' },
+          { value: 75, name: 'Click' },
+          { value: 50, name: 'Visit' },
+          { value: 25, name: 'Order' }
         ]
-      },
-      // 金字塔
-      chartSettings: {
-        ascending: true
       }
     }
   }

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

@@ -1,9 +1,11 @@
-import { test, expect } from '@playwright/test'
+import { test, expect, config } from '../fixtures'
+
+config.waitTime = 4000
 
 test('base', async ({ page }) => {
   await page.goto('chart-funnel#funnel-base')
-  const chart = page.locator('#funnel-base .hui-chart')
-  await expect(chart).toHaveScreenshot('base.png')
+  await expect(page.locator('#funnel-base .hui-chart')).toBeInViewport()
+  await expect(page).toHaveScreenshot('base.png')
 })
 
 test('demo2', async ({ page }) => {

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-gauge :data="chartData" :settings="chartSettings"></tiny-chart-gauge>
+    <tiny-chart-gauge :options="options"></tiny-chart-gauge>
   </div>
 </template>
 
@@ -8,9 +8,12 @@
 import { ref } from 'vue'
 import { ChartGauge as TinyChartGauge } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['type', 'a', 'b', 'value'],
-  rows: [{ type: '速度', value: 80, a: 1, b: 2 }]
+const options = ref({
+  data: [
+    {
+      value: 71,
+      name: 'Utilization rate'
+    }
+  ]
 })
-const chartSettings = ref({})
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-gauge :data="chartData" :settings="chartSettings"></tiny-gauge>
+    <tiny-gauge :options="options"></tiny-gauge>
   </div>
 </template>
 
@@ -13,11 +13,14 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['type', 'a', 'b', 'value'],
-        rows: [{ type: '速度', value: 80, a: 1, b: 2 }]
-      },
-      chartSettings: {}
+      options: {
+        data: [
+          {
+            value: 71,
+            name: 'Utilization rate'
+          }
+        ]
+      }
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-gauge :data="chartData" :settings="chartSettings"></tiny-chart-gauge>
+    <tiny-chart-gauge :options="options"></tiny-chart-gauge>
   </div>
 </template>
 
@@ -8,13 +8,18 @@
 import { ref } from 'vue'
 import { ChartGauge as TinyChartGauge } from '@opentiny/vue'
 
-// 指标维度配置
-const chartData = ref({
-  columns: ['a', 'b', 'type', 'value'],
-  rows: [{ type: '速度', value: 80, a: 1, b: 2 }]
-})
-const chartSettings = ref({
-  dimension: 'type',
-  metrics: 'value'
+const options = ref({
+  // 仪表盘的最小值
+  min: 0,
+
+  // 仪表盘的最大值
+  max: 1000,
+  pointer: true,
+  data: [
+    {
+      value: 666,
+      name: 'Utilization rate'
+    }
+  ]
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-gauge :data="chartData" :settings="chartSettings"></tiny-gauge>
+    <tiny-gauge :options="options"></tiny-gauge>
   </div>
 </template>
 
@@ -13,14 +13,19 @@ export default {
   },
   data() {
     return {
-      // 指标维度配置
-      chartData: {
-        columns: ['a', 'b', 'type', 'value'],
-        rows: [{ type: '速度', value: 80, a: 1, b: 2 }]
-      },
-      chartSettings: {
-        dimension: 'type',
-        metrics: 'value'
+      options: {
+        // 仪表盘的最小值
+        min: 0,
+
+        // 仪表盘的最大值
+        max: 1000,
+        pointer: true,
+        data: [
+          {
+            value: 666,
+            name: 'Utilization rate'
+          }
+        ]
       }
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-gauge :data="chartData" :settings="chartSettings"></tiny-chart-gauge>
+    <tiny-chart-gauge :options="options"></tiny-chart-gauge>
   </div>
 </template>
 
@@ -8,20 +8,22 @@
 import { ref } from 'vue'
 import { ChartGauge as TinyChartGauge } from '@opentiny/vue'
 
-// 设置数据类型
-const chartData = ref({
-  columns: ['type', 'value'],
-  rows: [{ type: '占比', value: 0.8 }]
-})
-const chartSettings = ref({
-  dataType: {
-    占比: 'percent'
-  },
-  seriesMap: {
-    占比: {
-      min: 0,
-      max: 1
+const options = ref({
+  // splitColor 分割仪表盘
+  // splitColor[i][0] 的值代表整根轴线的百分比, 应该 0 到 1 之间
+  // splitColor[1][1] 是对应的颜色
+  splitColor: [
+    [0.25, '#0d9458'],
+    [0.5, '#eeba18'],
+    [0.75, '#ec6f1a'],
+    [1, '#f43146']
+  ],
+  pointer: true,
+  data: [
+    {
+      value: 71,
+      name: 'Utilization rate'
     }
-  }
+  ]
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-gauge :data="chartData" :settings="chartSettings"></tiny-gauge>
+    <tiny-gauge :options="options"></tiny-gauge>
   </div>
 </template>
 
@@ -13,21 +13,23 @@ export default {
   },
   data() {
     return {
-      // 设置数据类型
-      chartData: {
-        columns: ['type', 'value'],
-        rows: [{ type: '占比', value: 0.8 }]
-      },
-      chartSettings: {
-        dataType: {
-          占比: 'percent'
-        },
-        seriesMap: {
-          占比: {
-            min: 0,
-            max: 1
+      options: {
+        // splitColor 分割仪表盘
+        // splitColor[i][0] 的值代表整根轴线的百分比, 应该 0 到 1 之间
+        // splitColor[1][1] 是对应的颜色
+        splitColor: [
+          [0.25, '#0d9458'],
+          [0.5, '#eeba18'],
+          [0.75, '#ec6f1a'],
+          [1, '#f43146']
+        ],
+        pointer: true,
+        data: [
+          {
+            value: 71,
+            name: 'Utilization rate'
           }
-        }
+        ]
       }
     }
   }