@opentiny/vue-docs 2.2.22 → 3.16.0

package/demos/pc/app/chart/gauge/demo4-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,17 +8,63 @@
 import { ref } from 'vue'
 import { ChartGauge as TinyChartGauge } from '@opentiny/vue'
 
-// 设置指标别名与单位
-const chartData = ref({
-  columns: ['type', 'value'],
-  rows: [{ type: 'speed', value: 60 }]
-})
-const chartSettings = ref({
-  labelMap: {
-    speed: '速度'
+const options = ref({
+  position: {
+    center: ['50%', '50%'],
+    radius: '45%'
+  },
+  color: '#5CB300',
+  splitNumber: 5,
+  splitLine: {
+    show: false
+  },
+  text: {
+    offset: ['0%', '35%'],
+    formatter(value) {
+      return '{value|' + value + '}{unit|%}\n{name|任职匹配率}\n\n\n{status|正常}'
+    },
+    formatterStyle: {
+      value: {
+        fontSize: 50,
+        fontWeight: 'bolder',
+        color: '#191919',
+        textShadowColor: '#ffffff',
+        textShadowBlur: 1,
+        textShowOffsetX: 2,
+        textShowOffsetY: 2,
+        padding: [0, 0, 30, 0]
+      },
+      unit: {
+        fontSize: 12,
+        fontWeight: 'italic',
+        color: '#191919',
+        textShadowColor: '#ffffff',
+        textShadowBlur: 1,
+        textShowOffsetX: 2,
+        textShowOffsetY: 2,
+        padding: [22, 0, 30, 6]
+      },
+      name: {
+        fontSize: 14,
+        color: '#595959',
+        padding: [15, 5, 5, 5]
+      },
+      status: {
+        fontSize: 12,
+        color: '#5CB300',
+        backgroundColor: '#f5f5f5',
+        width: 120,
+        height: 32,
+        bordeRadius: 20,
+        align: 'center'
+      }
+    }
   },
-  dataName: {
-    speed: 'km/h'
-  }
+  data: [
+    {
+      value: 87.8,
+      name: 'Winning Percentage'
+    }
+  ]
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-gauge :data="chartData" :settings="chartSettings"></tiny-gauge>
+    <tiny-gauge :options="options"></tiny-gauge>
   </div>
 </template>
 
@@ -13,18 +13,64 @@ export default {
   },
   data() {
     return {
-      // 设置指标别名与单位
-      chartData: {
-        columns: ['type', 'value'],
-        rows: [{ type: 'speed', value: 60 }]
-      },
-      chartSettings: {
-        labelMap: {
-          speed: '速度'
+      options: {
+        position: {
+          center: ['50%', '50%'],
+          radius: '45%'
         },
-        dataName: {
-          speed: 'km/h'
-        }
+        color: '#5CB300',
+        splitNumber: 5,
+        splitLine: {
+          show: false
+        },
+        text: {
+          offset: ['0%', '35%'],
+          formatter(value) {
+            return '{value|' + value + '}{unit|%}\n{name|任职匹配率}\n\n\n{status|正常}'
+          },
+          formatterStyle: {
+            value: {
+              fontSize: 50,
+              fontWeight: 'bolder',
+              color: '#191919',
+              textShadowColor: '#ffffff',
+              textShadowBlur: 1,
+              textShowOffsetX: 2,
+              textShowOffsetY: 2,
+              padding: [0, 0, 30, 0]
+            },
+            unit: {
+              fontSize: 12,
+              fontWeight: 'italic',
+              color: '#191919',
+              textShadowColor: '#ffffff',
+              textShadowBlur: 1,
+              textShowOffsetX: 2,
+              textShowOffsetY: 2,
+              padding: [22, 0, 30, 6]
+            },
+            name: {
+              fontSize: 14,
+              color: '#595959',
+              padding: [15, 5, 5, 5]
+            },
+            status: {
+              fontSize: 12,
+              color: '#5CB300',
+              backgroundColor: '#f5f5f5',
+              width: 120,
+              height: 32,
+              bordeRadius: 20,
+              align: 'center'
+            }
+          }
+        },
+        data: [
+          {
+            value: 87.8,
+            name: 'Winning Percentage'
+          }
+        ]
       }
     }
   }

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

@@ -1,251 +1,23 @@
 <template>
   <div>
-    <tiny-gauge :data="chartData" :settings="chartSettings" background-color="#000"></tiny-gauge>
+    <tiny-chart-gauge :options="options"></tiny-chart-gauge>
   </div>
 </template>
 
-<script setup>
-import { reactive } from 'vue'
-import { ChartGauge as TinyGauge } from '@opentiny/vue'
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartGauge as TinyChartGauge } from '@opentiny/vue'
 
-const chartData = reactive({
-  columns: ['type', 'value'],
-  rows: [
-    { type: 'speeding', value: 60 },
-    { type: 'rotatingSpeed', value: 10 },
-    { type: 'oilGauge', value: 1 }
-  ]
-})
-const chartSettings = reactive({
-  dataName: {
-    speeding: 'km/h',
-    rotatingSpeed: 'x1000 r/min',
-    oilGauge: 'gas'
-  },
-  seriesMap: {
-    speeding: {
-      min: 0,
-      max: 300,
-      splitNumber: 12,
-      radius: '52%',
-      axisLine: {
-        lineStyle: {
-          color: [
-            [0.09, 'lime'],
-            [0.82, '#1e90ff'],
-            [1, '#ff4500']
-          ],
-          width: 3,
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          fontWeight: 'bolder',
-          color: '#fff',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      axisTick: {
-        length: 15,
-        lineStyle: {
-          color: 'auto',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      splitLine: {
-        length: 5,
-        lineStyle: {
-          width: 4,
-          color: '#fff',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      pointer: {
-        shadowColor: '#fefefe',
-        shadowBlur: 5
-      },
-      title: {
-        textStyle: {
-          fontSize: 26,
-          fontStyle: 'italic',
-          fontWeight: 'bolder',
-          color: '#fff',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      detail: {
-        backgroundColor: 'rgba(30,144,255,0.8)',
-        borderWidth: 1,
-        borderColor: '#fefefe',
-        shadowColor: '#fefefe',
-        shadowBlur: 5,
-        offsetCenter: [0, '60%'],
-        textStyle: {
-          fontWeight: 'bolder',
-          color: '#fff',
-          fontSize: 20
-        }
-      }
-    },
-    rotatingSpeed: {
-      center: ['12%', '55%'],
-      radius: '40%',
-      min: 0,
-      max: 100,
-      endAngle: 50,
-      splitNumber: 5,
-      axisLine: {
-        lineStyle: {
-          color: [
-            [0.29, 'lime'],
-            [0.86, '#1fa0ff'],
-            [1, '#fe4502']
-          ],
-          width: 3,
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          fontWeight: 'bolder',
-          color: '#fff',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      axisTick: {
-        length: 12,
-        lineStyle: {
-          color: 'auto',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      splitLine: {
-        length: 12,
-        lineStyle: {
-          width: 3,
-          color: '#fff',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      pointer: {
-        width: 5,
-        shadowColor: '#fefefe',
-        shadowBlur: 5
-      },
-      title: {
-        offsetCenter: ['50%', '20%'],
-        textStyle: {
-          fontStyle: 'italic',
-          color: '#fcfcfc',
-          fontWeight: 'bolder',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      detail: {
-        borderColor: '#fcfcfc',
-        shadowColor: '#fefefe',
-        width: 20,
-        shadowBlur: 5,
-        height: 20,
-        offsetCenter: [40, '45%'],
-        textStyle: {
-          fontWeight: 'bolder',
-          color: '#419cf5',
-          fontSize: 20
-        }
-      }
-    },
-    oilGauge: {
-      center: ['80%', '52%'],
-      min: 0,
-      max: 3,
-      radius: '60%',
-      startAngle: 135,
-      endAngle: 45,
-      splitNumber: 3,
-      axisLine: {
-        lineStyle: {
-          color: [
-            [0.2, 'lime'],
-            [0.8, '#1e90ff'],
-            [1, '#ff4500']
-          ],
-          width: 3,
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      axisTick: {
-        length: 12,
-        lineStyle: {
-          color: 'auto',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      axisLabel: {
-        textStyle: {
-          fontWeight: 'bolder',
-          color: '#fff',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        },
-        formatter(value) {
-          switch (String(value)) {
-            case '0':
-              return `${value}E`
-            case '1':
-              return `${value}Gas`
-            case '2':
-              return `${value}F`
-            case '3':
-              return `${value}H`
-          }
-        }
-      },
-      splitLine: {
-        length: 14,
-        lineStyle: {
-          width: 6,
-          color: '#fefefe',
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      pointer: {
-        width: 3,
-        shadowColor: '#fefefe',
-        shadowBlur: 5
-      },
-      title: {
-        offsetCenter: ['50%', '20%'],
-        textStyle: {
-          fontStyle: 'italic',
-          color: '#ffaebd',
-          fontWeight: 'bolder',
-          fontSize: 20,
-          shadowColor: '#fefefe',
-          shadowBlur: 12
-        }
-      },
-      detail: {
-        textStyle: {
-          fontWeight: 'bolder',
-          color: '#419cf5'
-        }
-      }
+const options = ref({
+  // gradientColor表示从仪表盘左到右的渐变色
+  // gradientColor.length == 1 时也可以表示单色
+  // 注意： splitColor 的优先级高于 gradientColor
+  gradientColor: ['#00bfc9', '#a9e4a9'],
+  data: [
+    {
+      value: 71,
+      name: 'Utilization rate'
     }
-  }
+  ]
 })
 </script>

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

@@ -1,261 +1,31 @@
 <template>
   <div>
-    <tiny-gauge :data="chartData" :settings="chartSettings" background-color="#000"></tiny-gauge>
+    <tiny-gauge :options="options"></tiny-gauge>
   </div>
 </template>
 
 <script lang="jsx">
 import { ChartGauge } from '@opentiny/vue'
 
-const chartData = {
-  chartData: {
-    columns: ['type', 'value'],
-    rows: [
-      { type: 'speeding', value: 60 },
-      { type: 'rotatingSpeed', value: 10 },
-      { type: 'oilGauge', value: 1 }
-    ]
-  },
-  chartSettings: {
-    dataName: {
-      speeding: 'km/h',
-      rotatingSpeed: 'x1000 r/min',
-      oilGauge: 'gas'
-    },
-    seriesMap: {
-      speeding: {
-        min: 0,
-        max: 300,
-        splitNumber: 12,
-        radius: '52%',
-        axisLine: {
-          lineStyle: {
-            color: [
-              [0.09, 'lime'],
-              [0.82, '#1e90ff'],
-              [1, '#ff4500']
-            ],
-            width: 3,
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        axisLabel: {
-          textStyle: {
-            fontWeight: 'bolder',
-            color: '#fff',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        axisTick: {
-          length: 15,
-          lineStyle: {
-            color: 'auto',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        splitLine: {
-          length: 5,
-          lineStyle: {
-            width: 4,
-            color: '#fff',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        pointer: {
-          shadowColor: '#fefefe',
-          shadowBlur: 5
-        },
-        title: {
-          textStyle: {
-            fontSize: 26,
-            fontStyle: 'italic',
-            fontWeight: 'bolder',
-            color: '#fff',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        detail: {
-          backgroundColor: 'rgba(30,144,255,0.8)',
-          borderWidth: 1,
-          borderColor: '#fefefe',
-          shadowColor: '#fefefe',
-          shadowBlur: 5,
-          offsetCenter: [0, '60%'],
-          textStyle: {
-            fontWeight: 'bolder',
-            color: '#fff',
-            fontSize: 20
-          }
-        }
-      },
-      rotatingSpeed: {
-        center: ['12%', '55%'],
-        radius: '40%',
-        min: 0,
-        max: 100,
-        endAngle: 50,
-        splitNumber: 5,
-        axisLine: {
-          lineStyle: {
-            color: [
-              [0.29, 'lime'],
-              [0.86, '#1fa0ff'],
-              [1, '#fe4502']
-            ],
-            width: 3,
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        axisLabel: {
-          textStyle: {
-            fontWeight: 'bolder',
-            color: '#fff',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        axisTick: {
-          length: 12,
-          lineStyle: {
-            color: 'auto',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        splitLine: {
-          length: 12,
-          lineStyle: {
-            width: 3,
-            color: '#fff',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        pointer: {
-          width: 5,
-          shadowColor: '#fefefe',
-          shadowBlur: 5
-        },
-        title: {
-          offsetCenter: ['50%', '20%'],
-          textStyle: {
-            fontStyle: 'italic',
-            color: '#fcfcfc',
-            fontWeight: 'bolder',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        detail: {
-          borderColor: '#fcfcfc',
-          shadowColor: '#fefefe',
-          width: 20,
-          shadowBlur: 5,
-          height: 20,
-          offsetCenter: [40, '45%'],
-          textStyle: {
-            fontWeight: 'bolder',
-            color: '#419cf5',
-            fontSize: 20
-          }
-        }
-      },
-      oilGauge: {
-        center: ['80%', '52%'],
-        min: 0,
-        max: 3,
-        radius: '60%',
-        startAngle: 135,
-        endAngle: 45,
-        splitNumber: 3,
-        axisLine: {
-          lineStyle: {
-            color: [
-              [0.2, 'lime'],
-              [0.8, '#1e90ff'],
-              [1, '#ff4500']
-            ],
-            width: 3,
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        axisTick: {
-          length: 12,
-          lineStyle: {
-            color: 'auto',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        axisLabel: {
-          textStyle: {
-            fontWeight: 'bolder',
-            color: '#fff',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          },
-          formatter(value) {
-            switch (String(value)) {
-              case '0':
-                return `${value}E`
-              case '1':
-                return `${value}Gas`
-              case '2':
-                return `${value}F`
-              case '3':
-                return `${value}H`
-            }
-          }
-        },
-        splitLine: {
-          length: 14,
-          lineStyle: {
-            width: 6,
-            color: '#fefefe',
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        pointer: {
-          width: 3,
-          shadowColor: '#fefefe',
-          shadowBlur: 5
-        },
-        title: {
-          offsetCenter: ['50%', '20%'],
-          textStyle: {
-            fontStyle: 'italic',
-            color: '#ffaebd',
-            fontWeight: 'bolder',
-            fontSize: 20,
-            shadowColor: '#fefefe',
-            shadowBlur: 12
-          }
-        },
-        detail: {
-          textStyle: {
-            fontWeight: 'bolder',
-            color: '#419cf5'
-          }
-        }
-      }
-    }
-  }
-}
-
 export default {
   components: {
     TinyGauge: ChartGauge
   },
   data() {
-    return chartData
+    return {
+      options: {
+        // gradientColor表示从仪表盘左到右的渐变色
+        // gradientColor.length == 1 时也可以表示单色
+        // 注意： splitColor 的优先级高于 gradientColor
+        gradientColor: ['#00bfc9', '#a9e4a9'],
+        data: [
+          {
+            value: 71,
+            name: 'Utilization rate'
+          }
+        ]
+      }
+    }
   }
 }
 </script>