@opentiny/vue-docs 2.2.23 → 3.16.0

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

@@ -1,131 +1,236 @@
 <template>
   <div>
-    <tiny-sunburst :extend="extend" theme-type="ict"></tiny-sunburst>
+    <tiny-chart-sunburst :options="options"></tiny-chart-sunburst>
   </div>
 </template>
 
-<script setup>
-import { reactive } from 'vue'
-import { ChartSunburst as TinySunburst } from '@opentiny/vue'
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ChartSunburst as TinyChartSunburst } from '@opentiny/vue'
 
-const data = [
-  {
-    name: '展示平台',
-    children: [
+const options = ref({
+  series: {
+    label: {
+      rotate: 'radial'
+    },
+    levels: [
+      {},
       {
-        name: '手机端',
-        children: [
-          {
-            name: '安卓',
-            children: [
-              {
-                name: 'SVG ↑↑↑',
-                value: 1
-              }
-            ]
-          },
-          {
-            name: 'iOS',
-            children: [
-              {
-                name: 'SVG ↑',
-                value: 1
-              }
-            ]
-          }
-        ]
+        r0: '15%',
+        r: '35%',
+        itemStyle: {
+          borderWidth: 2
+        },
+        label: {
+          rotate: 'tangential'
+        }
       },
       {
-        name: '电脑端',
-        children: [
-          {
-            name: 'Mac',
-            children: [
-              {
-                name: 'Chrome',
-                children: [
-                  {
-                    name: 'SVG ↑',
-                    value: 1
-                  }
-                ]
-              },
-              {
-                name: 'Safari',
-                children: [
-                  {
-                    name: '-',
-                    value: 1
-                  }
-                ]
-              },
-              {
-                name: 'Firefox',
-                children: [
-                  {
-                    name: '-',
-                    value: 1
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            name: 'Windows',
-            children: [
-              {
-                name: 'IE',
-                children: [
-                  {
-                    name: 'Canvas ↑↑',
-                    value: 1
-                  }
-                ]
-              },
-              {
-                name: 'Chrome',
-                children: [
-                  {
-                    name: '-',
-                    value: 1
-                  }
-                ]
-              },
-              {
-                name: 'Firefox',
-                children: [
-                  {
-                    name: 'SVG ↑',
-                    value: 1
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: '特殊\n渲染\n需求',
-    children: [
+        r0: '35%',
+        r: '70%',
+        label: {
+          align: 'right'
+        }
+      },
       {
-        name: '仅 Canvas\n支持',
-        value: 1
+        r0: '70%',
+        r: '72%',
+        label: {
+          position: 'outside',
+          padding: 3,
+          silent: false
+        },
+        itemStyle: {
+          borderWidth: 3
+        }
       }
     ]
-  }
-]
-
-const extend = reactive({
-  series: {
-    center: ['50%', '50%'],
-    data,
-    label: {
-      show: true,
-      rotate: 0,
-      color: '#191919'
+  },
+  data: [
+    {
+      name: '展示平台',
+      children: [
+        {
+          name: '手机端',
+          children: [
+            {
+              name: '安卓',
+              children: [
+                {
+                  name: 'SVG ↑↑↑',
+                  value: 1
+                }
+              ]
+            },
+            {
+              name: 'iOS',
+              children: [
+                {
+                  name: 'SVG ↑',
+                  value: 1
+                }
+              ]
+            }
+          ]
+        },
+        {
+          name: '电脑端',
+          children: [
+            {
+              name: 'Mac',
+              children: [
+                {
+                  name: 'Chrome',
+                  children: [
+                    {
+                      name: 'SVG ↑',
+                      value: 1
+                    }
+                  ]
+                },
+                {
+                  name: 'Safari',
+                  children: [
+                    {
+                      name: '-',
+                      value: 1
+                    }
+                  ]
+                },
+                {
+                  name: 'Firefox',
+                  children: [
+                    {
+                      name: '-',
+                      value: 1
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'Windows',
+              children: [
+                {
+                  name: 'IE',
+                  children: [
+                    {
+                      name: 'Canvas ↑↑',
+                      value: 1
+                    }
+                  ]
+                },
+                {
+                  name: 'Chrome',
+                  children: [
+                    {
+                      name: '-',
+                      value: 1
+                    }
+                  ]
+                },
+                {
+                  name: 'Firefox',
+                  children: [
+                    {
+                      name: 'SVG ↑',
+                      value: 1
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: '图表类型',
+      children: [
+        {
+          name: '折线图',
+          children: [
+            {
+              name: 'SVG ↑↑',
+              value: 1
+            }
+          ]
+        },
+        {
+          name: '柱状图',
+          children: [
+            {
+              name: 'Canvas ↑↑',
+              value: 1
+            }
+          ]
+        },
+        {
+          name: '饼图',
+          children: [
+            {
+              name: '-',
+              value: 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: '数据量',
+      children: [
+        {
+          name: '< 1000',
+          children: [
+            {
+              name: '-',
+              value: 1
+            }
+          ]
+        },
+        {
+          name: '>= 1000',
+          children: [
+            {
+              name: 'Canvas ↑',
+              value: 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: '图表个数',
+      children: [
+        {
+          name: '< 10',
+          children: [
+            {
+              name: '-',
+              value: 1
+            }
+          ]
+        },
+        {
+          name: '>= 10',
+          children: [
+            {
+              name: 'SVG ↑↑↑',
+              value: 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      name: '特殊\n渲染\n需求',
+      children: [
+        {
+          name: '仅 Canvas\n支持',
+          value: 1
+        }
+      ]
     }
-  }
+  ]
 })
 </script>

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

@@ -1,65 +1,177 @@
 <template>
   <div>
-    <tiny-sunburst :extend="extend" theme-type="ict"></tiny-sunburst>
+    <tiny-sunburst :options="options"></tiny-sunburst>
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import { ChartSunburst } from '@opentiny/vue'
 
-const data = [
-  {
-    name: '展示平台',
-    children: [
-      {
-        name: '手机端',
-        children: [
-          {
-            name: '安卓',
-            children: [
-              {
-                name: 'SVG ↑↑↑',
-                value: 1
-              }
-            ]
+export default {
+  components: {
+    TinySunburst: ChartSunburst
+  },
+  data() {
+    return {
+      options: {
+        series: {
+          label: {
+            rotate: 'radial'
           },
+          levels: [
+            {},
+            {
+              r0: '15%',
+              r: '35%',
+              itemStyle: {
+                borderWidth: 2
+              },
+              label: {
+                rotate: 'tangential'
+              }
+            },
+            {
+              r0: '35%',
+              r: '70%',
+              label: {
+                align: 'right'
+              }
+            },
+            {
+              r0: '70%',
+              r: '72%',
+              label: {
+                position: 'outside',
+                padding: 3,
+                silent: false
+              },
+              itemStyle: {
+                borderWidth: 3
+              }
+            }
+          ]
+        },
+        data: [
           {
-            name: 'iOS',
+            name: '展示平台',
             children: [
               {
-                name: 'SVG ↑',
-                value: 1
+                name: '手机端',
+                children: [
+                  {
+                    name: '安卓',
+                    children: [
+                      {
+                        name: 'SVG ↑↑↑',
+                        value: 1
+                      }
+                    ]
+                  },
+                  {
+                    name: 'iOS',
+                    children: [
+                      {
+                        name: 'SVG ↑',
+                        value: 1
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                name: '电脑端',
+                children: [
+                  {
+                    name: 'Mac',
+                    children: [
+                      {
+                        name: 'Chrome',
+                        children: [
+                          {
+                            name: 'SVG ↑',
+                            value: 1
+                          }
+                        ]
+                      },
+                      {
+                        name: 'Safari',
+                        children: [
+                          {
+                            name: '-',
+                            value: 1
+                          }
+                        ]
+                      },
+                      {
+                        name: 'Firefox',
+                        children: [
+                          {
+                            name: '-',
+                            value: 1
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    name: 'Windows',
+                    children: [
+                      {
+                        name: 'IE',
+                        children: [
+                          {
+                            name: 'Canvas ↑↑',
+                            value: 1
+                          }
+                        ]
+                      },
+                      {
+                        name: 'Chrome',
+                        children: [
+                          {
+                            name: '-',
+                            value: 1
+                          }
+                        ]
+                      },
+                      {
+                        name: 'Firefox',
+                        children: [
+                          {
+                            name: 'SVG ↑',
+                            value: 1
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
               }
             ]
-          }
-        ]
-      },
-      {
-        name: '电脑端',
-        children: [
+          },
           {
-            name: 'Mac',
+            name: '图表类型',
             children: [
               {
-                name: 'Chrome',
+                name: '折线图',
                 children: [
                   {
-                    name: 'SVG ↑',
+                    name: 'SVG ↑↑',
                     value: 1
                   }
                 ]
               },
               {
-                name: 'Safari',
+                name: '柱状图',
                 children: [
                   {
-                    name: '-',
+                    name: 'Canvas ↑↑',
                     value: 1
                   }
                 ]
               },
               {
-                name: 'Firefox',
+                name: '饼图',
                 children: [
                   {
                     name: '-',
@@ -70,19 +182,33 @@ const data = [
             ]
           },
           {
-            name: 'Windows',
+            name: '数据量',
             children: [
               {
-                name: 'IE',
+                name: '< 1000',
                 children: [
                   {
-                    name: 'Canvas ↑↑',
+                    name: '-',
                     value: 1
                   }
                 ]
               },
               {
-                name: 'Chrome',
+                name: '>= 1000',
+                children: [
+                  {
+                    name: 'Canvas ↑',
+                    value: 1
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            name: '图表个数',
+            children: [
+              {
+                name: '< 10',
                 children: [
                   {
                     name: '-',
@@ -91,48 +217,27 @@ const data = [
                 ]
               },
               {
-                name: 'Firefox',
+                name: '>= 10',
                 children: [
                   {
-                    name: 'SVG ↑',
+                    name: 'SVG ↑↑↑',
                     value: 1
                   }
                 ]
               }
             ]
+          },
+          {
+            name: '特殊\n渲染\n需求',
+            children: [
+              {
+                name: '仅 Canvas\n支持',
+                value: 1
+              }
+            ]
           }
         ]
       }
-    ]
-  },
-  {
-    name: '特殊\n渲染\n需求',
-    children: [
-      {
-        name: '仅 Canvas\n支持',
-        value: 1
-      }
-    ]
-  }
-]
-
-export default {
-  components: {
-    TinySunburst: ChartSunburst
-  },
-  data() {
-    return {
-      extend: {
-        series: {
-          center: ['50%', '50%'],
-          data,
-          label: {
-            show: true,
-            rotate: 0,
-            color: '#191919'
-          }
-        }
-      }
     }
   }
 }

package/demos/pc/app/chart/sunburst/sunburst.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-sunburst#sunburst-base')