@opentiny/vue-docs 2.2.23 → 3.16.1

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-sunburst :extend="extend"></tiny-chart-sunburst>
+    <tiny-chart-sunburst :options="options"></tiny-chart-sunburst>
   </div>
 </template>
 
@@ -8,281 +8,192 @@
 import { ref } from 'vue'
 import { ChartSunburst as TinyChartSunburst } from '@opentiny/vue'
 
-let canvasColor = ['#FF6161', '#FF8C75', '#FFB499']
-let svgColor = ['#53C299', '#83E0A8', '#B7F6C0']
-let evenColor = '#eee'
-
-let data = [
-  {
-    name: '展示平台',
-    children: [
-      {
-        name: '手机端',
-        children: [
-          {
-            name: '安卓',
-            children: [
-              {
-                name: 'SVG ↑↑↑',
-                value: 1,
-                itemStyle: {
-                  color: svgColor[0]
+const options = ref({
+  data: [
+    {
+      name: '展示平台',
+      children: [
+        {
+          name: '手机端',
+          children: [
+            {
+              name: '安卓',
+              children: [
+                {
+                  name: 'SVG ↑↑↑',
+                  value: 1
                 }
-              }
-            ]
-          },
-          {
-            name: 'iOS',
-            children: [
-              {
-                name: 'SVG ↑',
-                value: 1,
-                itemStyle: {
-                  color: svgColor[2]
+              ]
+            },
+            {
+              name: 'iOS',
+              children: [
+                {
+                  name: 'SVG ↑',
+                  value: 1
                 }
-              }
-            ]
-          }
-        ]
-      },
-      {
-        name: '电脑端',
-        children: [
-          {
-            name: 'Mac',
-            children: [
-              {
-                name: 'Chrome',
-                children: [
-                  {
-                    name: 'SVG ↑',
-                    value: 1,
-                    itemStyle: {
-                      color: svgColor[2]
+              ]
+            }
+          ]
+        },
+        {
+          name: '电脑端',
+          children: [
+            {
+              name: 'Mac',
+              children: [
+                {
+                  name: 'Chrome',
+                  children: [
+                    {
+                      name: 'SVG ↑',
+                      value: 1
                     }
-                  }
-                ]
-              },
-              {
-                name: 'Safari',
-                children: [
-                  {
-                    name: '-',
-                    value: 1,
-                    itemStyle: {
-                      color: evenColor
+                  ]
+                },
+                {
+                  name: 'Safari',
+                  children: [
+                    {
+                      name: '-',
+                      value: 1
                     }
-                  }
-                ]
-              },
-              {
-                name: 'Firefox',
-                children: [
-                  {
-                    name: '-',
-                    value: 1,
-                    itemStyle: {
-                      color: evenColor
+                  ]
+                },
+                {
+                  name: 'Firefox',
+                  children: [
+                    {
+                      name: '-',
+                      value: 1
                     }
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            name: 'Windows',
-            children: [
-              {
-                name: 'IE',
-                children: [
-                  {
-                    name: 'Canvas ↑↑',
-                    value: 1,
-                    itemStyle: {
-                      color: canvasColor[1]
+                  ]
+                }
+              ]
+            },
+            {
+              name: 'Windows',
+              children: [
+                {
+                  name: 'IE',
+                  children: [
+                    {
+                      name: 'Canvas ↑↑',
+                      value: 1
                     }
-                  }
-                ]
-              },
-              {
-                name: 'Chrome',
-                children: [
-                  {
-                    name: '-',
-                    value: 1,
-                    itemStyle: {
-                      color: evenColor
+                  ]
+                },
+                {
+                  name: 'Chrome',
+                  children: [
+                    {
+                      name: '-',
+                      value: 1
                     }
-                  }
-                ]
-              },
-              {
-                name: 'Firefox',
-                children: [
-                  {
-                    name: 'SVG ↑',
-                    value: 1,
-                    itemStyle: {
-                      color: svgColor[2]
+                  ]
+                },
+                {
+                  name: 'Firefox',
+                  children: [
+                    {
+                      name: 'SVG ↑',
+                      value: 1
                     }
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: '图表类型',
-    children: [
-      {
-        name: '折线图',
-        children: [
-          {
-            name: 'SVG ↑↑',
-            value: 1,
-            itemStyle: {
-              color: svgColor[1]
-            }
-          }
-        ]
-      },
-      {
-        name: '柱状图',
-        children: [
-          {
-            name: 'Canvas ↑↑',
-            value: 1,
-            itemStyle: {
-              color: canvasColor[1]
+                  ]
+                }
+              ]
             }
-          }
-        ]
-      },
-      {
-        name: '饼图',
-        children: [
-          {
-            name: '-',
-            value: 1,
-            itemStyle: {
-              color: evenColor
+          ]
+        }
+      ]
+    },
+    {
+      name: '图表类型',
+      children: [
+        {
+          name: '折线图',
+          children: [
+            {
+              name: 'SVG ↑↑',
+              value: 1
             }
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: '数据量',
-    children: [
-      {
-        name: '< 1000',
-        children: [
-          {
-            name: '-',
-            value: 1,
-            itemStyle: {
-              color: evenColor
+          ]
+        },
+        {
+          name: '柱状图',
+          children: [
+            {
+              name: 'Canvas ↑↑',
+              value: 1
             }
-          }
-        ]
-      },
-      {
-        name: '>= 1000',
-        children: [
-          {
-            name: 'Canvas ↑',
-            value: 1,
-            itemStyle: {
-              color: canvasColor[2]
+          ]
+        },
+        {
+          name: '饼图',
+          children: [
+            {
+              name: '-',
+              value: 1
             }
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: '图表个数',
-    children: [
-      {
-        name: '< 10',
-        children: [
-          {
-            name: '-',
-            value: 1,
-            itemStyle: {
-              color: evenColor
+          ]
+        }
+      ]
+    },
+    {
+      name: '数据量',
+      children: [
+        {
+          name: '< 1000',
+          children: [
+            {
+              name: '-',
+              value: 1
             }
-          }
-        ]
-      },
-      {
-        name: '>= 10',
-        children: [
-          {
-            name: 'SVG ↑↑↑',
-            value: 1,
-            itemStyle: {
-              color: svgColor[0]
+          ]
+        },
+        {
+          name: '>= 1000',
+          children: [
+            {
+              name: 'Canvas ↑',
+              value: 1
             }
-          }
-        ]
-      }
-    ]
-  },
-  {
-    name: '特殊\n渲染\n需求',
-    children: [
-      {
-        name: '仅 Canvas\n支持',
-        value: 1,
-        itemStyle: {
-          color: canvasColor[0]
+          ]
         }
-      }
-    ]
-  }
-]
-
-const extend = ref({
-  series: {
-    radius: ['10%', '100%'],
-    center: ['50%', '50%'],
-    startAngle: 0,
-    sort: null,
-    highlightPolicy: 'ancestor',
-    data,
-    label: {
-      rotate: 0,
-      textBorderColor: '#444',
-      textBorderWidth: 2,
-      fontSize: 14
+      ]
     },
-    levels: [
-      {},
-      {
-        itemStyle: {
-          color: '#999'
-        }
-      },
-      {
-        itemStyle: {
-          color: '#bbb'
+    {
+      name: '图表个数',
+      children: [
+        {
+          name: '< 10',
+          children: [
+            {
+              name: '-',
+              value: 1
+            }
+          ]
+        },
+        {
+          name: '>= 10',
+          children: [
+            {
+              name: 'SVG ↑↑↑',
+              value: 1
+            }
+          ]
         }
-      },
-      {
-        itemStyle: {
-          color: '#ccc'
+      ]
+    },
+    {
+      name: '特殊\n渲染\n需求',
+      children: [
+        {
+          name: '仅 Canvas\n支持',
+          value: 1
         }
-      }
-    ],
-    itemStyle: {
-      color: '#ddd',
-      borderWidth: 2
+      ]
     }
-  }
+  ]
 })
 </script>