first commit

2025-04-22 10:56:56 +07:00
commit af123c091b
147 changed files with 778063 additions and 0 deletions
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const option: ECOption = {
+  backgroundColor: 'transparent',
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+    },
+  },
+  grid: {
+    top: 20,
+    left: '2%',
+    right: '2%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      axisTick: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: 'pageA',
+      type: 'bar',
+      stack: 'vistors',
+      barWidth: '60%',
+      data: [79, 52, 200, 334, 390, 330, 220],
+    },
+    {
+      name: 'pageB',
+      type: 'bar',
+      stack: 'vistors',
+      barWidth: '60%',
+      data: [80, 52, 200, 334, 390, 330, 220],
+    },
+    {
+      name: 'pageC',
+      type: 'bar',
+      stack: 'vistors',
+      barWidth: '60%',
+      data: [30, 52, 200, 334, 390, 330, 220],
+    },
+  ],
+}
+</script>
+
+<template>
+  <v-chart :option="option" autoresize />
+</template>
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+const data = [
+  ['2022-06-05', 116],
+  ['2022-06-06', 129],
+  ['2022-06-07', 135],
+  ['2022-06-08', 86],
+  ['2022-06-09', 73],
+  ['2022-06-10', 85],
+  ['2022-06-11', 73],
+  ['2022-06-12', 68],
+  ['2022-06-13', 92],
+  ['2022-06-14', 130],
+  ['2022-06-15', 245],
+  ['2022-06-16', 139],
+  ['2022-06-17', 115],
+  ['2022-06-18', 111],
+  ['2022-06-19', 309],
+  ['2022-06-20', 206],
+  ['2022-06-21', 137],
+  ['2022-06-22', 128],
+  ['2022-06-23', 85],
+  ['2022-06-24', 94],
+  ['2022-06-25', 71],
+  ['2022-06-26', 106],
+  ['2022-06-27', 84],
+  ['2022-06-28', 93],
+  ['2022-06-29', 85],
+  ['2022-06-30', 73],
+  ['2022-07-01', 83],
+  ['2022-07-02', 125],
+  ['2022-07-03', 107],
+  ['2022-07-04', 82],
+  ['2022-07-05', 44],
+  ['2022-07-06', 72],
+  ['2022-07-07', 106],
+  ['2022-07-08', 107],
+  ['2022-07-09', 66],
+  ['2022-07-10', 91],
+  ['2022-07-11', 92],
+  ['2022-07-12', 113],
+  ['2022-07-13', 107],
+  ['2022-07-14', 131],
+  ['2022-07-15', 111],
+  ['2022-07-16', 64],
+  ['2022-07-17', 69],
+  ['2022-07-18', 88],
+  ['2022-07-19', 77],
+  ['2022-07-20', 83],
+  ['2022-07-21', 111],
+  ['2022-07-22', 57],
+  ['2022-07-23', 55],
+  ['2022-07-24', 60],
+]
+
+const option: ECOption = {
+  backgroundColor: 'transparent',
+  dataset: { source: data },
+  visualMap: {
+    show: false,
+    type: 'continuous',
+    min: 0,
+    max: 400,
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  grid: {
+    top: 20,
+    left: '2%',
+    right: '2%',
+    bottom: '3%',
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'time',
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      name: 'value',
+      type: 'line',
+      showSymbol: false,
+      lineStyle: {
+        width: 4,
+      },
+    },
+  ],
+}
+</script>
+
+<template>
+  <v-chart :option="option" autoresize />
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const option: ECOption = {
+  backgroundColor: 'transparent',
+  tooltip: {
+    trigger: 'item',
+  },
+  legend: {
+    left: 'center',
+    bottom: '10',
+    data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
+  },
+  series: [
+    {
+      name: 'WEEKLY WRITE ARTICLES',
+      type: 'pie',
+      roseType: 'radius',
+      radius: [15, 95],
+      center: ['50%', '38%'],
+      data: [
+        { value: 320, name: 'Industries' },
+        { value: 240, name: 'Technology' },
+        { value: 149, name: 'Forex' },
+        { value: 100, name: 'Gold' },
+        { value: 59, name: 'Forecasts' },
+      ],
+      animationEasing: 'cubicInOut',
+    },
+  ],
+}
+</script>
+
+<template>
+  <v-chart :option="option" autoresize />
+</template>
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const option: ECOption = {
+  backgroundColor: 'transparent',
+  radar: {
+    radius: '66%',
+    center: ['50%', '42%'],
+    splitNumber: 8,
+    splitArea: {
+      areaStyle: {
+        color: 'rgba(127,95,132,.3)',
+        opacity: 1,
+        shadowBlur: 45,
+        shadowColor: 'rgba(0,0,0,.5)',
+        shadowOffsetX: 0,
+        shadowOffsetY: 15,
+      },
+    },
+    indicator: [
+      { name: 'Sales' },
+      { name: 'Administration' },
+      { name: 'Technology' },
+      { name: 'Customer Support' },
+      { name: 'Development' },
+      { name: 'Marketing' },
+    ],
+  },
+  legend: {
+    left: 'center',
+    bottom: '10',
+    data: ['Allocated Budget', 'Expected Spending', 'Actual Spending'],
+  },
+  series: [
+    {
+      type: 'radar',
+      symbolSize: 0,
+      areaStyle: {
+        shadowBlur: 13,
+        shadowColor: 'rgba(0,0,0,.2)',
+        shadowOffsetX: 0,
+        shadowOffsetY: 10,
+        opacity: 1,
+      },
+      data: [
+        {
+          value: [5000, 7000, 12000, 11000, 15000, 14000],
+          name: 'Allocated Budget',
+        },
+        {
+          value: [4000, 9000, 15000, 15000, 13000, 11000],
+          name: 'Expected Spending',
+        },
+        {
+          value: [5500, 5000, 12000, 15000, 8000, 6000],
+          name: 'Actual Spending',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <v-chart :option="option" autoresize />
+</template>