@opentiny/vue-docs 2.2.22 → 3.16.0

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

@@ -1,123 +1,95 @@
 <template>
   <div>
-    <tiny-tree-chart :data="chartData" :settings="chartSettings"></tiny-tree-chart>
+    <tiny-tree-chart :options="options"></tiny-tree-chart>
   </div>
 </template>
 
 <script lang="jsx">
 import { ChartTree } from '@opentiny/vue'
 
-const treeData = {
-  name: 'f',
-  value: 1,
-  link: '',
-  children: [
-    {
-      name: 'a',
-      value: 1,
-      link: '',
-      children: [
-        {
-          name: 'a-a',
-          link: '',
-          value: 2
-        },
-        {
-          name: 'a-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'b',
-      value: 1,
-      link: '',
-      children: [
-        {
-          name: 'b-a',
-          link: '',
-          value: 2
-        },
-        {
-          name: 'b-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'c',
-      value: 3,
-      link: '',
-      children: [
-        {
-          name: 'c-a',
-          link: '',
-          value: 4
-        },
-        {
-          name: 'c-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'd',
-      value: 3,
-      link: '',
-      children: [
-        {
-          name: 'd-a',
-          link: '',
-          value: 4
-        },
-        {
-          name: 'd-b',
-          link: '',
-          value: 2
-        }
-      ]
-    }
-  ]
-}
-
 export default {
   components: {
     TinyTreeChart: ChartTree
   },
   data() {
     return {
-      // 多树图
-      chartData: {
-        columns: ['name', 'value'],
-        rows: [
-          {
-            name: 'tree1',
-            value: [treeData]
-          },
+      options: {
+        // 图表类型（线型树图）
+        type: 'RingTreeChart',
+
+        // padding控制图表距离容器的上、右、下、左padding值
+        padding: [20, 80, 20, 80],
+
+        // 图元的大小，默认值10
+        symbolSize: 10,
+
+        // 初始树图的展开层级，最小值为1，默认值1
+        initialTreeDepth: 2,
+
+        // data数据采用树状结构
+        // name：节点的名称
+        // value：节点的数值
+        // children： 子节点
+        data: [
           {
-            name: 'tree2',
-            value: [treeData]
+            name: '节点',
+            data: [
+              {
+                name: 'flares',
+                children: [
+                  {
+                    name: 'datas',
+                    children: [
+                      {
+                        name: 'converters',
+                        children: [
+                          { name: 'Converters', value: 721 },
+                          { name: 'DelimitedTextConverter', value: 4291 }
+                        ]
+                      },
+                      {
+                        name: 'DataUtil',
+                        value: 3321
+                      }
+                    ]
+                  },
+                  {
+                    name: 'display',
+                    children: [
+                      { name: 'DirtySprite', value: 8831 },
+                      { name: 'LineSprite', value: 1731 },
+                      { name: 'RectSprite', value: 3621 }
+                    ]
+                  },
+                  {
+                    name: 'flex',
+                    children: [{ name: 'FlareVis', value: 4111 }]
+                  },
+                  {
+                    name: 'query',
+                    children: [
+                      { name: 'AggregateExpression', value: 1611 },
+                      { name: 'And', value: 1021 },
+                      { name: 'Arithmetic', value: 3891 },
+                      { name: 'Average', value: 891 },
+                      { name: 'BinaryExpression', value: 2891 },
+                      {
+                        name: 'methods',
+                        children: [
+                          { name: 'add', value: 591 },
+                          { name: 'and', value: 331 },
+                          { name: 'average', value: 28 },
+                          { name: 'count', value: 271 },
+                          { name: 'distinct', value: 291 }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
-      },
-      chartSettings: {
-        seriesMap: {
-          tree1: {
-            top: '5%',
-            left: '7%',
-            bottom: '2%',
-            right: '60%'
-          },
-          tree2: {
-            top: '20%',
-            left: '60%',
-            bottom: '22%',
-            right: '18%'
-          }
-        }
       }
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-tree :data="chartData" :settings="chartSettings"></tiny-chart-tree>
+    <tiny-chart-tree :options="options"></tiny-chart-tree>
   </div>
 </template>
 
@@ -8,97 +8,83 @@
 import { ref } from 'vue'
 import { ChartTree as TinyChartTree } from '@opentiny/vue'
 
-const treeData = {
-  name: 'f',
-  value: 1,
-  link: '',
-  children: [
-    {
-      name: 'a',
-      value: 1,
-      link: '',
-      children: [
-        {
-          name: 'a-a',
-          link: '',
-          value: 2
-        },
-        {
-          name: 'a-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'b',
-      value: 1,
-      link: '',
-      children: [
-        {
-          name: 'b-a',
-          link: '',
-          value: 2
-        },
-        {
-          name: 'b-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'c',
-      value: 3,
-      link: '',
-      children: [
-        {
-          name: 'c-a',
-          link: '',
-          value: 4
-        },
-        {
-          name: 'c-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
+const options = ref({
+  // 图表类型（线型树图）
+  type: 'LineTreeChart',
+
+  // padding控制图表距离容器的上、右、下、左padding值
+  padding: [20, 80, 20, 80],
+
+  // 图元的大小，默认值10
+  symbolSize: 15,
+
+  // 连线的形状，仅type为LineTreeChart有效，'curve'或'polyline',默认值'curve'
+  lineType: 'curve',
+
+  // 初始树图的展开层级，最小值为1，默认值1
+  initialTreeDepth: 2,
+
+  // 树图的起点方向，仅type为LineTreeChart有效，取值'left','right','top','bottom',默认值'left'
+  direction: 'left',
+  data: [
     {
-      name: 'd',
-      value: 3,
-      link: '',
-      children: [
-        {
-          name: 'd-a',
-          link: '',
-          value: 4
-        },
+      name: '节点',
+      data: [
         {
-          name: 'd-b',
-          link: '',
-          value: 2
+          name: 'flares',
+          children: [
+            {
+              name: 'datas',
+              children: [
+                {
+                  name: 'converters',
+                  children: [
+                    { name: 'Converters', value: 721 },
+                    { name: 'DelimitedTextConverter', value: 4291 }
+                  ]
+                },
+                {
+                  name: 'DataUtil',
+                  value: 3321
+                }
+              ]
+            },
+            {
+              name: 'display',
+              children: [
+                { name: 'DirtySprite', value: 8831 },
+                { name: 'LineSprite', value: 1731 },
+                { name: 'RectSprite', value: 3621 }
+              ]
+            },
+            {
+              name: 'flex',
+              children: [{ name: 'FlareVis', value: 4111 }]
+            },
+            {
+              name: 'query',
+              children: [
+                { name: 'AggregateExpression', value: 1611 },
+                { name: 'And', value: 1021 },
+                { name: 'Arithmetic', value: 3891 },
+                { name: 'Average', value: 891 },
+                { name: 'BinaryExpression', value: 2891 },
+                {
+                  name: 'methods',
+                  children: [
+                    { name: 'add', value: 591 },
+                    { name: 'and', value: 331 },
+                    { name: 'average', value: 28 },
+                    { name: 'count', value: 271 },
+                    { name: 'distinct', value: 291 }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }
   ]
-}
-
-// 径向树图
-const chartData = ref({
-  columns: ['name', 'value'],
-  rows: [
-    {
-      name: 'tree1',
-      value: [treeData]
-    }
-  ]
-})
-const chartSettings = ref({
-  seriesMap: {
-    tree1: {
-      layout: 'radial'
-    }
-  }
 })
 </script>

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

@@ -1,110 +1,96 @@
 <template>
   <div>
-    <tiny-tree-chart :data="chartData" :settings="chartSettings"></tiny-tree-chart>
+    <tiny-tree-chart :options="options"></tiny-tree-chart>
   </div>
 </template>
 
 <script lang="jsx">
 import { ChartTree } from '@opentiny/vue'
 
-const treeData = {
-  name: 'f',
-  value: 1,
-  link: '',
-  children: [
-    {
-      name: 'a',
-      value: 1,
-      link: '',
-      children: [
-        {
-          name: 'a-a',
-          link: '',
-          value: 2
-        },
-        {
-          name: 'a-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'b',
-      value: 1,
-      link: '',
-      children: [
-        {
-          name: 'b-a',
-          link: '',
-          value: 2
-        },
-        {
-          name: 'b-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'c',
-      value: 3,
-      link: '',
-      children: [
-        {
-          name: 'c-a',
-          link: '',
-          value: 4
-        },
-        {
-          name: 'c-b',
-          link: '',
-          value: 2
-        }
-      ]
-    },
-    {
-      name: 'd',
-      value: 3,
-      link: '',
-      children: [
-        {
-          name: 'd-a',
-          link: '',
-          value: 4
-        },
-        {
-          name: 'd-b',
-          link: '',
-          value: 2
-        }
-      ]
-    }
-  ]
-}
-
 export default {
   components: {
     TinyTreeChart: ChartTree
   },
   data() {
     return {
-      // 径向树图
-      chartData: {
-        columns: ['name', 'value'],
-        rows: [
+      options: {
+        // 图表类型（线型树图）
+        type: 'LineTreeChart',
+
+        // padding控制图表距离容器的上、右、下、左padding值
+        padding: [20, 80, 20, 80],
+
+        // 图元的大小，默认值10
+        symbolSize: 15,
+
+        // 连线的形状，仅type为LineTreeChart有效，'curve'或'polyline',默认值'curve'
+        lineType: 'curve',
+
+        // 初始树图的展开层级，最小值为1，默认值1
+        initialTreeDepth: 2,
+
+        // 树图的起点方向，仅type为LineTreeChart有效，取值'left','right','top','bottom',默认值'left'
+        direction: 'left',
+        data: [
           {
-            name: 'tree1',
-            value: [treeData]
+            name: '节点',
+            data: [
+              {
+                name: 'flares',
+                children: [
+                  {
+                    name: 'datas',
+                    children: [
+                      {
+                        name: 'converters',
+                        children: [
+                          { name: 'Converters', value: 721 },
+                          { name: 'DelimitedTextConverter', value: 4291 }
+                        ]
+                      },
+                      {
+                        name: 'DataUtil',
+                        value: 3321
+                      }
+                    ]
+                  },
+                  {
+                    name: 'display',
+                    children: [
+                      { name: 'DirtySprite', value: 8831 },
+                      { name: 'LineSprite', value: 1731 },
+                      { name: 'RectSprite', value: 3621 }
+                    ]
+                  },
+                  {
+                    name: 'flex',
+                    children: [{ name: 'FlareVis', value: 4111 }]
+                  },
+                  {
+                    name: 'query',
+                    children: [
+                      { name: 'AggregateExpression', value: 1611 },
+                      { name: 'And', value: 1021 },
+                      { name: 'Arithmetic', value: 3891 },
+                      { name: 'Average', value: 891 },
+                      { name: 'BinaryExpression', value: 2891 },
+                      {
+                        name: 'methods',
+                        children: [
+                          { name: 'add', value: 591 },
+                          { name: 'and', value: 331 },
+                          { name: 'average', value: 28 },
+                          { name: 'count', value: 271 },
+                          { name: 'distinct', value: 291 }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
-      },
-      chartSettings: {
-        seriesMap: {
-          tree1: {
-            layout: 'radial'
-          }
-        }
       }
     }
   }