@opentiny/vue-docs 2.2.22 → 3.16.0

package/demos/pc/app/chart/props/demo10-composition-api.vue

@@ -3,7 +3,7 @@
     <tiny-button @click="addDataZoomImg">点击添加dataZoom自定义图片</tiny-button>
     <tiny-line
       ref="chartRef"
-      :data="chartData"
+      :options="options"
       :data-zoom="dataZoom"
       :init-options="initOptions"
       :resize-delay="1000"
@@ -24,19 +24,34 @@ const extend = ref({
   }
 })
 const initOptions = ref({
-  width: '800px',
   height: '400px'
 })
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: [
-    { 日期: '1月1日', 成本: 15, 利润: 12 },
-    { 日期: '1月2日', 成本: 12, 利润: 25 },
-    { 日期: '1月3日', 成本: 21, 利润: 10 },
-    { 日期: '1月4日', 成本: 41, 利润: 32 },
-    { 日期: '1月5日', 成本: 31, 利润: 30 },
-    { 日期: '1月6日', 成本: 71, 利润: 55 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+  ],
+  xAxis: {
+    data: 'Month'
+  },
+  yAxis: {
+    name: 'precentage(%)'
+  }
 })
 const dataZoom = ref([
   {

package/demos/pc/app/chart/props/demo10.vue

@@ -3,7 +3,7 @@
     <tiny-button @click="addDataZoomImg">点击添加dataZoom自定义图片</tiny-button>
     <tiny-line
       ref="chartRef"
-      :data="chartData"
+      :options="options"
       :data-zoom="dataZoom"
       :init-options="initOptions"
       :resize-delay="1000"
@@ -30,19 +30,34 @@ export default {
         }
       },
       initOptions: {
-        width: '800px',
         height: '400px'
       },
-      chartData: {
-        columns: ['日期', '成本', '利润'],
-        rows: [
-          { 日期: '1月1日', 成本: 15, 利润: 12 },
-          { 日期: '1月2日', 成本: 12, 利润: 25 },
-          { 日期: '1月3日', 成本: 21, 利润: 10 },
-          { 日期: '1月4日', 成本: 41, 利润: 32 },
-          { 日期: '1月5日', 成本: 31, 利润: 30 },
-          { 日期: '1月6日', 成本: 71, 利润: 55 }
-        ]
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+        ],
+        xAxis: {
+          data: 'Month'
+        },
+        yAxis: {
+          name: 'precentage(%)'
+        }
       },
       dataZoom: [
         {

package/demos/pc/app/chart/props/demo11-composition-api.vue

@@ -1,21 +1,37 @@
 <template>
-  <tiny-chart-line :data="chartData" :toolbox="toolbox"></tiny-chart-line>
+  <tiny-chart-line :options="options" :toolbox="toolbox"></tiny-chart-line>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: [
-    { 日期: '1月1日', 成本: 15, 利润: 12 },
-    { 日期: '1月2日', 成本: 12, 利润: 25 },
-    { 日期: '1月3日', 成本: 21, 利润: 10 },
-    { 日期: '1月4日', 成本: 41, 利润: 32 },
-    { 日期: '1月5日', 成本: 31, 利润: 30 },
-    { 日期: '1月6日', 成本: 71, 利润: 55 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+  ],
+  xAxis: {
+    data: 'Month'
+  },
+  yAxis: {
+    name: 'precentage(%)'
+  }
 })
 const toolbox = ref({
   feature: {

package/demos/pc/app/chart/props/demo11.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-line :data="chartData" :toolbox="toolbox"></tiny-line>
+  <tiny-line :options="options" :toolbox="toolbox"></tiny-line>
 </template>
 
 <script lang="jsx">
@@ -11,16 +11,32 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '成本', '利润'],
-        rows: [
-          { 日期: '1月1日', 成本: 15, 利润: 12 },
-          { 日期: '1月2日', 成本: 12, 利润: 25 },
-          { 日期: '1月3日', 成本: 21, 利润: 10 },
-          { 日期: '1月4日', 成本: 41, 利润: 32 },
-          { 日期: '1月5日', 成本: 31, 利润: 30 },
-          { 日期: '1月6日', 成本: 71, 利润: 55 }
-        ]
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+        ],
+        xAxis: {
+          data: 'Month'
+        },
+        yAxis: {
+          name: 'precentage(%)'
+        }
       },
       toolbox: {
         feature: {

package/demos/pc/app/chart/props/demo12-composition-api.vue

@@ -1,21 +1,37 @@
 <template>
-  <tiny-chart-line :data="chartData" :colors="colors"></tiny-chart-line>
+  <tiny-chart-line :options="options" :colors="colors"></tiny-chart-line>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: [
-    { 日期: '1月1日', 成本: 15, 利润: 12 },
-    { 日期: '1月2日', 成本: 12, 利润: 25 },
-    { 日期: '1月3日', 成本: 21, 利润: 10 },
-    { 日期: '1月4日', 成本: 41, 利润: 32 },
-    { 日期: '1月5日', 成本: 31, 利润: 30 },
-    { 日期: '1月6日', 成本: 71, 利润: 55 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+  ],
+  xAxis: {
+    data: 'Month'
+  },
+  yAxis: {
+    name: 'precentage(%)'
+  }
 })
 const colors = ref(['red', 'green'])
 </script>

package/demos/pc/app/chart/props/demo12.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-line :data="chartData" :colors="colors"></tiny-line>
+  <tiny-line :options="options" :colors="colors"></tiny-line>
 </template>
 
 <script lang="jsx">
@@ -11,16 +11,32 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '成本', '利润'],
-        rows: [
-          { 日期: '1月1日', 成本: 15, 利润: 12 },
-          { 日期: '1月2日', 成本: 12, 利润: 25 },
-          { 日期: '1月3日', 成本: 21, 利润: 10 },
-          { 日期: '1月4日', 成本: 41, 利润: 32 },
-          { 日期: '1月5日', 成本: 31, 利润: 30 },
-          { 日期: '1月6日', 成本: 71, 利润: 55 }
-        ]
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+        ],
+        xAxis: {
+          data: 'Month'
+        },
+        yAxis: {
+          name: 'precentage(%)'
+        }
       },
       colors: ['red', 'green']
     }

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

@@ -1,21 +1,40 @@
 <template>
-  <tiny-chart-line :data="chartData" :after-config="afterConfig"></tiny-chart-line>
+  <tiny-chart-line :options="options" :after-config="afterConfig"></tiny-chart-line>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: [
-    { 日期: '1月1日', 成本: 15, 利润: 12 },
-    { 日期: '1月2日', 成本: 12, 利润: 25 },
-    { 日期: '1月3日', 成本: 21, 利润: 10 },
-    { 日期: '1月4日', 成本: 41, 利润: 32 },
-    { 日期: '1月5日', 成本: 31, 利润: 30 },
-    { 日期: '1月6日', 成本: 71, 利润: 55 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+  ],
+  xAxis: {
+    data: 'Month'
+  },
+  yAxis: {
+    name: 'precentage(%)'
+  },
+  tooltip: {
+    show: true
+  }
 })
 
 function afterConfig(options) {

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-line :data="chartData" :after-config="afterConfig"></tiny-line>
+  <tiny-line :options="options" :after-config="afterConfig"></tiny-line>
 </template>
 
 <script lang="jsx">
@@ -11,16 +11,35 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '成本', '利润'],
-        rows: [
-          { 日期: '1月1日', 成本: 15, 利润: 12 },
-          { 日期: '1月2日', 成本: 12, 利润: 25 },
-          { 日期: '1月3日', 成本: 21, 利润: 10 },
-          { 日期: '1月4日', 成本: 41, 利润: 32 },
-          { 日期: '1月5日', 成本: 31, 利润: 30 },
-          { 日期: '1月6日', 成本: 71, 利润: 55 }
-        ]
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+        ],
+        xAxis: {
+          data: 'Month'
+        },
+        yAxis: {
+          name: 'precentage(%)'
+        },
+        tooltip: {
+          show: true
+        }
       }
     }
   },

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

@@ -1,21 +1,37 @@
 <template>
-  <tiny-chart-line :data="chartData" :loading="loading"></tiny-chart-line>
+  <tiny-chart-line :options="options" :loading="loading"></tiny-chart-line>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: [
-    { 日期: '1月1日', 成本: 15, 利润: 12 },
-    { 日期: '1月2日', 成本: 12, 利润: 25 },
-    { 日期: '1月3日', 成本: 21, 利润: 10 },
-    { 日期: '1月4日', 成本: 41, 利润: 32 },
-    { 日期: '1月5日', 成本: 31, 利润: 30 },
-    { 日期: '1月6日', 成本: 71, 利润: 55 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+  ],
+  xAxis: {
+    data: 'Month'
+  },
+  yAxis: {
+    name: 'precentage(%)'
+  }
 })
 const loading = ref(true)
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-line :data="chartData" :loading="loading"></tiny-line>
+  <tiny-line :options="options" :loading="loading"></tiny-line>
 </template>
 
 <script lang="jsx">
@@ -11,16 +11,32 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '成本', '利润'],
-        rows: [
-          { 日期: '1月1日', 成本: 15, 利润: 12 },
-          { 日期: '1月2日', 成本: 12, 利润: 25 },
-          { 日期: '1月3日', 成本: 21, 利润: 10 },
-          { 日期: '1月4日', 成本: 41, 利润: 32 },
-          { 日期: '1月5日', 成本: 31, 利润: 30 },
-          { 日期: '1月6日', 成本: 71, 利润: 55 }
-        ]
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+        ],
+        xAxis: {
+          data: 'Month'
+        },
+        yAxis: {
+          name: 'precentage(%)'
+        }
       },
       loading: true
     }

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

@@ -1,20 +1,36 @@
 <template>
-  <tiny-chart-line :data="chartData" :data-empty="true"></tiny-chart-line>
+  <tiny-chart-line :options="options" :data-empty="true"></tiny-chart-line>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: [
-    { 日期: '1月1日', 成本: 15, 利润: 12 },
-    { 日期: '1月2日', 成本: 12, 利润: 25 },
-    { 日期: '1月3日', 成本: 21, 利润: 10 },
-    { 日期: '1月4日', 成本: 41, 利润: 32 },
-    { 日期: '1月5日', 成本: 31, 利润: 30 },
-    { 日期: '1月6日', 成本: 71, 利润: 55 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+    { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+    { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+  ],
+  xAxis: {
+    data: 'Month'
+  },
+  yAxis: {
+    name: 'precentage(%)'
+  }
 })
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-line :data="chartData" :data-empty="true"></tiny-line>
+  <tiny-line :options="options" :data-empty="true"></tiny-line>
 </template>
 
 <script lang="jsx">
@@ -11,16 +11,32 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '成本', '利润'],
-        rows: [
-          { 日期: '1月1日', 成本: 15, 利润: 12 },
-          { 日期: '1月2日', 成本: 12, 利润: 25 },
-          { 日期: '1月3日', 成本: 21, 利润: 10 },
-          { 日期: '1月4日', 成本: 41, 利润: 32 },
-          { 日期: '1月5日', 成本: 31, 利润: 30 },
-          { 日期: '1月6日', 成本: 71, 利润: 55 }
-        ]
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestics': 33, 'Abroad': 37 },
+          { 'Month': 'Feb', 'Domestics': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestics': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestics': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestics': 37, 'Abroad': 13 },
+          { 'Month': 'Jun', 'Domestics': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestics': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestics': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestics': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestics': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestics': 32, 'Abroad': 11 }
+        ],
+        xAxis: {
+          data: 'Month'
+        },
+        yAxis: {
+          name: 'precentage(%)'
+        }
       }
     }
   }

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-chart-line :data="chartData">
+  <tiny-chart-line :options="options">
     <div class="data-empty">没有数据😂</div>
   </tiny-chart-line>
 </template>
@@ -8,9 +8,8 @@
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '成本', '利润'],
-  rows: []
+const options = ref({
+  data: []
 })
 </script>