@opentiny/vue-docs 2.2.23 → 3.16.0

package/demos/pc/app/chart/boxplot/vertical.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-boxplot ref="chart" :extend="option" @ready-once="init"></tiny-boxplot>
+  <tiny-boxplot ref="chart" :options="options"></tiny-boxplot>
 </template>
 
 <script lang="jsx">
@@ -11,94 +11,107 @@ export default {
   },
   data() {
     return {
-      option: {}
-    }
-  },
-  methods: {
-    init() {
-      let data = this.$refs.chart.prepareBoxplotData([
-        [850, 740, 900, 1070, 930, 850, 950, 980, 980, 880, 1000, 980, 930, 650, 760, 810, 1000, 1000, 960, 960],
-        [960, 940, 960, 940, 880, 800, 850, 880, 900, 840, 830, 790, 810, 880, 880, 830, 800, 790, 760, 800],
-        [880, 880, 880, 860, 720, 720, 620, 860, 970, 950, 880, 910, 850, 870, 840, 840, 850, 840, 840, 840],
-        [890, 810, 810, 820, 800, 770, 760, 740, 750, 760, 910, 920, 890, 860, 880, 720, 840, 850, 850, 780],
-        [890, 840, 780, 810, 760, 810, 790, 810, 820, 850, 870, 870, 810, 740, 810, 940, 950, 800, 810, 870]
-      ])
-
-      this.option = {
-        title: [
-          {
-            text: 'Michelson-Morley Experiment',
-            left: 'center'
-          },
-          {
-            text: 'upper: Q3 + 1.5 * IRQ \nlower: Q1 - 1.5 * IRQ',
-            borderColor: '#999',
-            borderWidth: 1,
-            textStyle: {
-              fontSize: 14
-            },
-            left: '10%',
-            top: '90%'
-          }
-        ],
-        tooltip: {
-          trigger: 'item',
-          axisPointer: {
-            type: 'shadow'
+      sourceData0: makeData(),
+      sourceData1: makeData(),
+      sourceData2: makeData(),
+      options: {
+        padding: [50, 30, 55, 20],
+        xAxis: {
+          axisLabel: {
+            formatter: 'expr {value}'
           }
         },
-        grid: {
-          left: '10%',
-          right: '10%',
-          bottom: '15%'
-        },
         yAxis: {
-          type: 'category',
-          data: data.axisData,
-          boundaryGap: true,
-          nameGap: 30,
-          splitArea: {
-            show: false
-          },
-          axisLabel: {
-            formatter: 'expr {value}'
-          },
-          splitLine: {
-            show: false
+          min: -400,
+          max: 600
+        },
+        legend: {
+          shwo: true,
+          position: {
+            top: 15,
+            right: 'center'
           }
         },
-        xAxis: {
-          type: 'value',
-          name: 'km/s minus 299,000',
-          splitArea: {
-            show: true
+        dataZoom: {
+          show: true,
+          start: 0,
+          end: 20,
+          position: {
+            left: 40,
+            bottom: 18
           }
         },
+        dataset: [
+          {
+            source: sourceData0
+          },
+          {
+            source: sourceData1
+          },
+          {
+            source: sourceData2
+          },
+          {
+            fromDatasetIndex: 0,
+            transform: { 'type': 'boxplot' }
+          },
+          {
+            fromDatasetIndex: 1,
+            transform: { 'type': 'boxplot' }
+          },
+          {
+            fromDatasetIndex: 2,
+            transform: { 'type': 'boxplot' }
+          }
+        ],
         series: [
           {
-            name: 'boxplot',
+            name: 'category_0',
             type: 'boxplot',
-            data: data.boxData,
-            tooltip: {
-              formatter(param) {
-                return [
-                  'Experiment ' + param.name + ': ',
-                  'upper: ' + param.data[5],
-                  'Q3: ' + param.data[4],
-                  'median: ' + param.data[3],
-                  'Q1: ' + param.data[2],
-                  'lower: ' + param.data[1]
-                ].join('<br/>')
-              }
-            }
+            datasetIndex: 3
           },
           {
-            name: 'outlier',
-            type: 'scatter',
-            data: data.outliers
+            name: 'category_1',
+            type: 'boxplot',
+            datasetIndex: 4
+          },
+          {
+            name: 'category_2',
+            type: 'boxplot',
+            datasetIndex: 5
           }
-        ]
+        ],
+        tipHtml: (params) => {
+          const { data, color, seriesName } = params
+          const labels = ['lower', 'Q3', 'median', 'Q1', 'upper']
+          let htmlString = `<div style="font-weight:bold">${seriesName}</div>`
+          let arr = []
+          labels.forEach((item, index) => {
+            let string = `<div>
+        <span style="display:inline;width:10px;height:10px;
+        margin-right:4px; border-radius:5px;border-style:solid;border-width: 1px
+        border-color:${color};background-color:${color};></span>
+        <span style="display:inline-block;width:90px">${item}:</span><span>${data[index + 1]}</span>
+        </div>`
+            arr.push(string)
+          })
+          htmlString += arr.join('')
+          return htmlString
+        }
+      }
+    }
+  },
+  methods: {
+    makeData() {
+      let data = []
+      for (let i = 0; i < 18; i++) {
+        let cate = []
+        for (let j = 0; j < 100; j++) {
+          cate.push(parseFloat('0.' + window.crypto.getRandomValues(new Uint32Array(1))[0]) * 200)
+        }
+        data.push(cate)
       }
+      return data
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-chart-candle :data="chartData" :settings="chartSettings"></tiny-chart-candle>
+    <tiny-chart-candle :options="options"></tiny-chart-candle>
   </div>
 </template>
 
@@ -8,314 +8,63 @@
 import { ref } from 'vue'
 import { ChartCandle as TinyChartCandle } from '@opentiny/vue'
 
-const chartData = ref({
-  columns: ['日期', 'open', 'close', 'lowest', 'highest', 'vol'],
-  rows: [
-    {
-      日期: '2004-01-05',
-      open: 10411.85,
-      close: 10544.07,
-      lowest: 10411.85,
-      highest: 10575.92,
-      vol: 221290000
-    },
-    {
-      日期: '2004-01-06',
-      open: 10543.85,
-      close: 10538.66,
-      lowest: 10454.37,
-      highest: 10584.07,
-      vol: 191460000
-    },
-    {
-      日期: '2004-01-07',
-      open: 10535.46,
-      close: 10529.03,
-      lowest: 10432.12,
-      highest: 10587.55,
-      vol: 225490000
-    },
-    {
-      日期: '2004-01-08',
-      open: 10530.07,
-      close: 10592.44,
-      lowest: 10480.59,
-      highest: 10651.99,
-      vol: 237770000
-    },
-    {
-      日期: '2004-01-09',
-      open: 10589.25,
-      close: 10458.89,
-      lowest: 10420.52,
-      highest: 10603.48,
-      vol: 223250000
-    },
-    {
-      日期: '2004-01-12',
-      open: 10461.55,
-      close: 10485.18,
-      lowest: 10389.85,
-      highest: 10543.03,
-      vol: 197960000
-    },
-    {
-      日期: '2004-01-13',
-      open: 10485.18,
-      close: 10427.18,
-      lowest: 10341.19,
-      highest: 10539.25,
-      vol: 197310000
-    },
-    {
-      日期: '2004-01-14',
-      open: 10428.67,
-      close: 10538.37,
-      lowest: 10426.89,
-      highest: 10573.85,
-      vol: 186280000
-    },
-    {
-      日期: '2004-01-15',
-      open: 10534.52,
-      close: 10553.85,
-      lowest: 10454.52,
-      highest: 10639.03,
-      vol: 260090000
-    },
-    {
-      日期: '2004-01-16',
-      open: 10556.37,
-      close: 10600.51,
-      lowest: 10503.71,
-      highest: 10666.88,
-      vol: 254170000
-    },
-    {
-      日期: '2004-01-20',
-      open: 10601.42,
-      close: 10528.66,
-      lowest: 10447.92,
-      highest: 10676.96,
-      vol: 224300000
-    },
-    {
-      日期: '2004-01-21',
-      open: 10522.77,
-      close: 10623.62,
-      lowest: 10453.11,
-      highest: 10665.72,
-      vol: 214920000
-    },
-    {
-      日期: '2004-01-22',
-      open: 10624.22,
-      close: 10623.18,
-      lowest: 10545.03,
-      highest: 10717.41,
-      vol: 219720000
-    },
-    {
-      日期: '2004-01-23',
-      open: 10625.25,
-      close: 10568.29,
-      lowest: 10490.14,
-      highest: 10691.77,
-      vol: 234260000
-    },
-    {
-      日期: '2004-01-26',
-      open: 10568.12,
-      close: 10702.51,
-      lowest: 10510.44,
-      highest: 10725.18,
-      vol: 186170000
-    },
-    {
-      日期: '2004-01-27',
-      open: 10701.11,
-      close: 10609.92,
-      lowest: 10579.33,
-      highest: 10748.81,
-      vol: 206560000
-    },
-    {
-      日期: '2004-01-28',
-      open: 10610.07,
-      close: 10468.37,
-      lowest: 10412.44,
-      highest: 10703.25,
-      vol: 247660000
-    },
-    {
-      日期: '2004-01-29',
-      open: 10467.41,
-      close: 10510.29,
-      lowest: 10369.92,
-      highest: 10611.56,
-      vol: 273970000
-    },
-    {
-      日期: '2004-01-30',
-      open: 10510.22,
-      close: 10488.07,
-      lowest: 10385.56,
-      highest: 10551.03,
-      vol: 208990000
-    },
-    {
-      日期: '2004-02-02',
-      open: 10487.78,
-      close: 10499.18,
-      lowest: 10395.55,
-      highest: 10614.44,
-      vol: 224800000
-    },
-    {
-      日期: '2004-02-03',
-      open: 10499.48,
-      close: 10505.18,
-      lowest: 10414.15,
-      highest: 10571.48,
-      vol: 183810000
-    },
-    {
-      日期: '2004-02-04',
-      open: 10503.11,
-      close: 10470.74,
-      lowest: 10394.81,
-      highest: 10567.85,
-      vol: 227760000
-    },
-    {
-      日期: '2004-02-05',
-      open: 10469.33,
-      close: 10495.55,
-      lowest: 10399.92,
-      highest: 10566.37,
-      vol: 187810000
-    },
-    {
-      日期: '2004-02-06',
-      open: 10494.89,
-      close: 10593.03,
-      lowest: 10433.74,
-      highest: 10634.81,
-      vol: 182880000
-    },
-    {
-      日期: '2004-02-09',
-      open: 10592.41,
-      close: 10579.03,
-      lowest: 10433.72,
-      highest: 10634.81,
-      vol: 160720000
-    },
-    {
-      日期: '2004-02-10',
-      open: 10578.74,
-      close: 10613.85,
-      lowest: 10511.18,
-      highest: 10667.03,
-      vol: 160590000
-    },
-    {
-      日期: '2004-02-11',
-      open: 10605.48,
-      close: 10737.72,
-      lowest: 10561.55,
-      highest: 10779.41,
-      vol: 277850000
-    },
-    {
-      日期: '2004-02-12',
-      open: 10735.18,
-      close: 10694.07,
-      lowest: 10636.44,
-      highest: 10775.03,
-      vol: 197560000
-    },
-    {
-      日期: '2004-02-13',
-      open: 10696.22,
-      close: 10627.85,
-      lowest: 10578.66,
-      highest: 10755.47,
-      vol: 208340000
-    },
-    {
-      日期: '2004-02-17',
-      open: 10628.88,
-      close: 10714.88,
-      lowest: 10628.88,
-      highest: 10762.07,
-      vol: 169730000
-    },
-    {
-      日期: '2004-02-18',
-      open: 10706.68,
-      close: 10671.99,
-      lowest: 10623.62,
-      highest: 10764.36,
-      vol: 164370000
-    },
-    {
-      日期: '2004-02-19',
-      open: 10674.59,
-      close: 10664.73,
-      lowest: 10626.44,
-      highest: 10794.95,
-      vol: 219890000
-    },
-    {
-      日期: '2004-02-20',
-      open: 10666.29,
-      close: 10619.03,
-      lowest: 10559.11,
-      highest: 10722.77,
-      vol: 220560000
-    },
-    {
-      日期: '2004-02-23',
-      open: 10619.55,
-      close: 10609.62,
-      lowest: 10508.89,
-      highest: 10711.84,
-      vol: 229950000
-    },
-    {
-      日期: '2004-02-24',
-      open: 10609.55,
-      close: 10566.37,
-      lowest: 10479.33,
-      highest: 10681.41,
-      vol: 225670000
-    },
-    {
-      日期: '2004-02-25',
-      open: 10566.59,
-      close: 10601.62,
-      lowest: 10509.42,
-      highest: 10660.73,
-      vol: 192420000
-    },
-    {
-      日期: '2004-02-26',
-      open: 10598.14,
-      close: 10580.14,
-      lowest: 10493.71,
-      highest: 10652.96,
-      vol: 223230000
-    },
-    {
-      日期: '2004-02-27',
-      open: 10581.55,
-      close: 10583.92,
-      lowest: 10519.03,
-      highest: 10689.55,
-      vol: 200050000
+const baseData = [
+  ['2004-01-05', 10411.85, 10544.07, 10411.85, 10575.92, 221290000],
+  ['2004-01-06', 10543.85, 10538.66, 10454.37, 10584.07, 191460000],
+  ['2004-01-07', 10535.46, 10529.03, 10432.12, 10587.55, 225490000],
+  ['2004-01-08', 10530.07, 10592.44, 10480.59, 10651.99, 237770000],
+  ['2004-01-09', 10589.25, 10458.89, 10420.52, 10603.48, 223250000],
+  ['2004-01-12', 10461.55, 10485.18, 10389.85, 10543.03, 197960000],
+  ['2004-01-13', 10485.18, 10427.18, 10341.19, 10539.25, 197310000],
+  ['2004-01-14', 10428.67, 10538.37, 10426.89, 10573.85, 186280000],
+  ['2004-01-15', 10534.52, 10553.85, 10454.52, 10639.03, 260090000],
+  ['2004-01-16', 10556.37, 10600.51, 10503.71, 10666.88, 254170000],
+  ['2004-01-20', 10601.42, 10528.66, 10447.92, 10676.96, 224300000],
+  ['2004-01-21', 10522.77, 10623.62, 10453.11, 10665.72, 214920000],
+  ['2004-01-22', 10624.22, 10623.18, 10545.03, 10717.41, 219720000],
+  ['2004-01-23', 10625.25, 10568.29, 10490.14, 10691.77, 234260000],
+  ['2004-01-26', 10568.12, 10702.51, 10510.44, 10725.18, 186170000],
+  ['2004-01-27', 10701.11, 10609.92, 10579.33, 10748.81, 206560000],
+  ['2004-01-28', 10610.07, 10468.37, 10412.44, 10703.25, 247660000],
+  ['2004-01-29', 10467.41, 10510.29, 10369.92, 10611.56, 273970000],
+  ['2004-01-30', 10510.22, 10488.07, 10385.56, 10551.03, 208990000],
+  ['2004-02-02', 10487.78, 10499.18, 10395.55, 10614.44, 224800000],
+  ['2004-02-03', 10499.48, 10505.18, 10414.15, 10571.48, 183810000],
+  ['2004-02-04', 10503.11, 10470.74, 10394.81, 10567.85, 227760000],
+  ['2004-02-05', 10469.33, 10495.55, 10399.92, 10566.37, 187810000],
+  ['2004-02-06', 10494.89, 10593.03, 10433.74, 10634.81, 182880000],
+  ['2004-02-09', 10592.41, 10579.03, 10433.72, 10634.81, 160720000],
+  ['2004-02-10', 10578.74, 10613.85, 10511.18, 10667.03, 160590000],
+  ['2004-02-11', 10605.48, 10737.72, 10561.55, 10779.41, 277850000],
+  ['2004-02-12', 10735.18, 10694.07, 10636.44, 10775.03, 197560000],
+  ['2004-02-13', 10696.22, 10627.85, 10578.66, 10755.47, 208340000],
+  ['2004-02-17', 10628.88, 10714.88, 10628.88, 10762.07, 169730000],
+  ['2004-02-18', 10706.68, 10671.99, 10623.62, 10764.36, 164370000],
+  ['2004-02-19', 10674.59, 10664.73, 10626.44, 10794.95, 219890000],
+  ['2004-02-20', 10666.29, 10619.03, 10559.11, 10722.77, 220560000],
+  ['2004-02-23', 10619.55, 10609.62, 10508.89, 10711.84, 229950000],
+  ['2004-02-24', 10609.55, 10566.37, 10479.33, 10681.41, 225670000],
+  ['2004-02-25', 10566.59, 10601.62, 10509.42, 10660.73, 192420000],
+  ['2004-02-26', 10598.14, 10580.14, 10493.71, 10652.96, 223230000],
+  ['2004-02-27', 10581.55, 10583.92, 10519.03, 10689.55, 200050000]
+]
+
+function handleData() {
+  const newData = baseData.map((item) => {
+    const obj = {
+      date: item[0],
+      open: item[1],
+      close: item[2],
+      lowest: item[3],
+      highest: item[4],
+      volumn: item[5]
     }
-  ]
+    return obj
+  })
+  return newData
+}
+
+const options = ref({
+  data: handleData()
 })
-const chartSettings = ref({})
 </script>