@opentiny/vue-docs 2.2.23 → 3.16.0

package/demos/pc/app/chart/histogram/demo8-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-histogram :data="chartData" :settings="chartSettings" :extend="extend"></tiny-chart-histogram>
+    <tiny-chart-histogram :options="options"></tiny-chart-histogram>
   </div>
 </template>
 
@@ -8,20 +8,28 @@
 import { ref } from 'vue'
 import { ChartHistogram as TinyChartHistogram } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '下单率'],
-  rows: [
-    { 日期: 1, 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-    { 日期: 2, 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-    { 日期: 5, 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-    { 日期: 10, 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-    { 日期: 20, 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-    { 日期: 22, 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-  ]
+const options = ref({
+  data: [
+    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+  ],
+  xAxis: {
+    data: 'Month',
+    labelRotate: 45
+  },
+  yAxis: {
+    name: 'Percent(%)'
+  }
 })
-// 设置横轴为连续的数值轴
-const chartSettings = ref({
-  xAxisType: 'value'
-})
-const extend = ref({})
+const chartSettings = ref({})
 </script>

package/demos/pc/app/chart/histogram/demo8.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-histogram :data="chartData" :settings="chartSettings" :extend="extend"></tiny-histogram>
+    <tiny-histogram :options="options"></tiny-histogram>
   </div>
 </template>
 
@@ -13,22 +13,29 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-          { 日期: 1, 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: 2, 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: 5, 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: 10, 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: 20, 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: 22, 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-        ]
-      },
-      // 设置横轴为连续的数值轴
-      chartSettings: {
-        xAxisType: 'value'
-      },
-      extend: {}
+      options: {
+        data: [
+          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+        ],
+        xAxis: {
+          data: 'Month',
+          labelRotate: 45
+        },
+        yAxis: {
+          name: 'Percent(%)'
+        }
+      }
     }
   }
 }

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

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-line :data="chartData" :settings="chartSettings"></tiny-chart-line>
+    <tiny-chart-line :options="options"></tiny-chart-line>
   </div>
 </template>
 
@@ -8,16 +8,29 @@
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '下单率'],
-  rows: [
-    { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-    { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-    { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-    { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-    { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-    { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-  ]
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+  ],
+  xAxis: 'Month',
+  yAxis: {
+    name: 'Percent(%)'
+  }
 })
-const chartSettings = ref({})
 </script>

package/demos/pc/app/chart/line/base.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-line :data="chartData" :settings="chartSettings"></tiny-line>
+    <tiny-line :options="options"></tiny-line>
   </div>
 </template>
 
@@ -13,18 +13,31 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-        ]
-      },
-      chartSettings: {}
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+        ],
+        xAxis: 'Month',
+        yAxis: {
+          name: 'Percent(%)'
+        }
+      }
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-line :data="chartData" :settings="chartSettings"></tiny-chart-line>
+    <tiny-chart-line :options="options"></tiny-chart-line>
   </div>
 </template>
 
@@ -8,20 +8,33 @@
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '下单率'],
-  rows: [
-    { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-    { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-    { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-    { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-    { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-    { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-  ]
-})
-// 设置显示的指标维度
-const chartSettings = ref({
-  metrics: ['访问用户', '下单用户'],
-  dimension: ['日期']
+const options = ref({
+  padding: [50, 30, 50, 20],
+  smooth: true, // smooth属性配置曲线
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+  ],
+  xAxis: {
+    data: 'Month',
+    name: 'Time'
+  },
+  yAxis: {
+    name: 'Percentage(%)'
+  }
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-line :data="chartData" :settings="chartSettings"></tiny-line>
+    <tiny-line :options="options"></tiny-line>
   </div>
 </template>
 
@@ -13,21 +13,34 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-        ]
-      },
-      // 设置显示的指标维度
-      chartSettings: {
-        metrics: ['访问用户', '下单用户'],
-        dimension: ['日期']
+      options: {
+        padding: [50, 30, 50, 20],
+        smooth: true, // smooth属性配置曲线
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+        ],
+        xAxis: {
+          data: 'Month',
+          name: 'Time'
+        },
+        yAxis: {
+          name: 'Percentage(%)'
+        }
       }
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-line :data="chartData" :settings="chartSettings"></tiny-chart-line>
+    <tiny-chart-line :options="options"></tiny-chart-line>
   </div>
 </template>
 
@@ -8,21 +8,30 @@
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '下单率'],
-  rows: [
-    { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-    { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-    { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-    { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-    { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-    { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-  ]
-})
-// 设置显示的指标维度
-const chartSettings = ref({
-  axisSite: { right: ['下单率'] },
-  yAxisType: ['KMB', 'percent'],
-  yAxisName: ['数值', '比率']
+const options = ref({
+  padding: [50, 30, 50, 20],
+  step: true, // true属性配置阶梯线
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+    { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+  ],
+  xAxis: 'Month',
+  yAxis: {
+    name: 'Units(Number)'
+  }
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-line :data="chartData" :settings="chartSettings"></tiny-line>
+    <tiny-line :options="options"></tiny-line>
   </div>
 </template>
 
@@ -13,22 +13,31 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-        ]
-      },
-      // 设置显示的指标维度
-      chartSettings: {
-        axisSite: { right: ['下单率'] },
-        yAxisType: ['KMB', 'percent'],
-        yAxisName: ['数值', '比率']
+      options: {
+        padding: [50, 30, 50, 20],
+        step: true, // true属性配置阶梯线
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestic': 30, 'Abroad': 15 },
+          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+          { 'Month': 'Jun', 'Domestic': 36, 'Abroad': 17 },
+          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+        ],
+        xAxis: 'Month',
+        yAxis: {
+          name: 'Units(Number)'
+        }
       }
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-line :data="chartData" :settings="chartSettings"></tiny-chart-line>
+    <tiny-chart-line :options="options"></tiny-chart-line>
   </div>
 </template>
 
@@ -8,25 +8,29 @@
 import { ref } from 'vue'
 import { ChartLine as TinyChartLine } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', '访问用户', '下单用户', '下单率'],
-  rows: [
-    { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-    { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-    { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-    { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-    { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-    { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
-    { 日期: '1/7', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-    { 日期: '1/8', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-    { 日期: '1/9', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-    { 日期: '1/10', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-    { 日期: '1/11', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-    { 日期: '1/12', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-  ]
-})
-// 设置显示的指标维度
-const chartSettings = ref({
-  // 'xAxis.0.axisLabel.rotate': 45
+const options = ref({
+  padding: [50, 30, 50, 20],
+  legend: {
+    show: true,
+    icon: 'line'
+  },
+  data: [
+    { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+    { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+    { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+    { 'Month': 'Apr', 'Domestic': '', 'Abroad': undefined },
+    { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+    { 'Month': 'Jun', 'Domestic': '', 'Abroad': '' },
+    { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+    { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+    { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+    { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+    { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+  ],
+  xAxis: 'Month',
+  yAxis: {
+    name: 'Percent(%)'
+  }
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-line :data="chartData" :settings="chartSettings"></tiny-line>
+    <tiny-line :options="options"></tiny-line>
   </div>
 </template>
 
@@ -13,26 +13,30 @@ export default {
   },
   data() {
     return {
-      chartData: {
-        columns: ['日期', '访问用户', '下单用户', '下单率'],
-        rows: [
-          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
-          { 日期: '1/7', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
-          { 日期: '1/8', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
-          { 日期: '1/9', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
-          { 日期: '1/10', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
-          { 日期: '1/11', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
-          { 日期: '1/12', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
-        ]
-      },
-      // 设置显示的指标维度
-      chartSettings: {
-        // 'xAxis.0.axisLabel.rotate': 45
+      options: {
+        padding: [50, 30, 50, 20],
+        legend: {
+          show: true,
+          icon: 'line'
+        },
+        data: [
+          { 'Month': 'Jan', 'Domestic': 33, 'Abroad': 1 },
+          { 'Month': 'Feb', 'Domestic': 27, 'Abroad': 39 },
+          { 'Month': 'Mar', 'Domestic': 31, 'Abroad': 20 },
+          { 'Month': 'Apr', 'Domestic': '', 'Abroad': undefined },
+          { 'Month': 'May', 'Domestic': 37, 'Abroad': 1 },
+          { 'Month': 'Jun', 'Domestic': '', 'Abroad': '' },
+          { 'Month': 'Jul', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Aug', 'Domestic': 22, 'Abroad': 12 },
+          { 'Month': 'Sep', 'Domestic': 17, 'Abroad': 30 },
+          { 'Month': 'Oct', 'Domestic': 40, 'Abroad': 33 },
+          { 'Month': 'Nov', 'Domestic': 42, 'Abroad': 22 },
+          { 'Month': 'Dec', 'Domestic': 32, 'Abroad': 1 }
+        ],
+        xAxis: 'Month',
+        yAxis: {
+          name: 'Percent(%)'
+        }
       }
     }
   }