1,347th Commit

Shyam-Chen · Feb 2, 2024 · 259015f · 259015f
1 parent b4f7cfe
commit 259015f
Show file tree

Hide file tree

Showing 5 changed files with 320 additions and 77 deletions.
diff --git a/src/routes/(backstage)/(library)/charts/bar-column/+page.vue b/src/routes/(backstage)/(library)/charts/bar-column/+page.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { EChartsOption } from 'echarts';
 import { ref, computed } from 'vue';
-import { XBreadcrumb, XCard, XButton } from '@x/ui';
+import { XBreadcrumb, XCard } from '@x/ui';
 import { use } from 'echarts/core';
 import { BarChart } from 'echarts/charts';
 
@@ -58,7 +58,7 @@ const columnChartOption = computed<EChartsOption>(() => {
       data: ['2021', '2022'],
     },
     grid: {
-      top: '5%',
+      top: '10%',
     },
     xAxis: {
       type: 'category',
@@ -89,12 +89,6 @@ const columnChartOption = computed<EChartsOption>(() => {
     ],
   };
 });
-
-function onUpdate() {
-  const randomInt = (max = 99) => Math.floor(Math.random() * max) + 1;
-  data2021.value = Array.from({ length: 7 }, () => randomInt());
-  data2022.value = Array.from({ length: 7 }, () => randomInt());
-}
 </script>
 
 <template>
@@ -106,10 +100,6 @@ function onUpdate() {
     <h2 class="text-3xl font-bold my-4">Bar</h2>
 
     <XCard>
-      <div class="flex justify-end mb-4 lg:mb-6">
-        <XButton @click="onUpdate">Update</XButton>
-      </div>
-
       <Echarts :option="barChartOption" class="w-full h-100" />
     </XCard>
   </section>
@@ -118,10 +108,6 @@ function onUpdate() {
     <h2 class="text-3xl font-bold my-4 pt-6">Column</h2>
 
     <XCard>
-      <div class="flex justify-end mb-4 lg:mb-6">
-        <XButton @click="onUpdate">Update</XButton>
-      </div>
-
       <Echarts :option="columnChartOption" class="w-full h-100" />
     </XCard>
   </section>

diff --git a/src/routes/(backstage)/(library)/charts/line-area/+page.vue b/src/routes/(backstage)/(library)/charts/line-area/+page.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { EChartsOption } from 'echarts';
 import { ref, computed } from 'vue';
-import { XBreadcrumb, XCard, XButton } from '@x/ui';
+import { XBreadcrumb, XCard } from '@x/ui';
 import { use } from 'echarts/core';
 import { LineChart } from 'echarts/charts';
 
@@ -19,7 +19,7 @@ const lineChartOption = computed<EChartsOption>(() => {
       data: ['2021', '2022'],
     },
     grid: {
-      top: '5%',
+      top: '10%',
     },
     xAxis: {
       type: 'category',
@@ -57,7 +57,7 @@ const areaChartOption = computed<EChartsOption>(() => {
       data: ['2021', '2022'],
     },
     grid: {
-      top: '5%',
+      top: '10%',
     },
     xAxis: {
       type: 'category',
@@ -90,12 +90,6 @@ const areaChartOption = computed<EChartsOption>(() => {
     ],
   };
 });
-
-function onUpdate() {
-  const randomInt = (max = 99) => Math.floor(Math.random() * max) + 1;
-  data2021.value = Array.from({ length: 7 }, () => randomInt());
-  data2022.value = Array.from({ length: 7 }, () => randomInt());
-}
 </script>
 
 <template>
@@ -107,10 +101,6 @@ function onUpdate() {
     <h2 class="text-3xl font-bold my-4">Line</h2>
 
     <XCard>
-      <div class="flex justify-end mb-4 lg:mb-6">
-        <XButton @click="onUpdate">Update</XButton>
-      </div>
-
       <Echarts :option="lineChartOption" class="w-full h-100" />
     </XCard>
   </section>
@@ -119,10 +109,6 @@ function onUpdate() {
     <h2 class="text-3xl font-bold my-4 pt-6">Area</h2>
 
     <XCard>
-      <div class="flex justify-end mb-4 lg:mb-6">
-        <XButton @click="onUpdate">Update</XButton>
-      </div>
-
       <Echarts :option="areaChartOption" class="w-full h-100" />
     </XCard>
   </section>

diff --git a/src/routes/(backstage)/(library)/charts/mixed/+page.vue b/src/routes/(backstage)/(library)/charts/mixed/+page.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { EChartsOption } from 'echarts';
 import { ref, computed } from 'vue';
-import { XBreadcrumb, XCard, XButton } from '@x/ui';
+import { XBreadcrumb, XCard } from '@x/ui';
 import { use } from 'echarts/core';
 import { LineChart, BarChart, ScatterChart } from 'echarts/charts';
 
@@ -34,16 +34,20 @@ const lineColumnChartOption = computed<EChartsOption>(() => {
     series: [
       {
         type: 'line',
+        itemStyle: { color: '#84cc16' },
+        smooth: true,
+        data: data2021.value,
+      },
+      {
+        type: 'bar',
         name: '2021',
         itemStyle: { color: '#6366f1' },
-        smooth: true,
         data: data2021.value,
       },
       {
-        type: 'line',
+        type: 'bar',
         name: '2022',
         itemStyle: { color: '#ec4899' },
-        smooth: true,
         data: data2022.value,
       },
     ],
@@ -60,39 +64,108 @@ const lineScatterChartOption = computed<EChartsOption>(() => {
       top: '5%',
     },
     xAxis: {
-      type: 'category',
-      data: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      type: 'value',
     },
     yAxis: {
       type: 'value',
     },
     tooltip: {
       trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
     },
     series: [
       {
         type: 'line',
+        itemStyle: { color: '#84cc16' },
+        smooth: true,
+        data: [
+          [16.4, 5.4],
+          [26.4, 8.9],
+        ],
+      },
+      {
+        type: 'scatter',
         name: '2021',
         itemStyle: { color: '#6366f1' },
         smooth: true,
-        data: data2021.value,
+        data: [
+          [16.4, 5.4],
+          [21.7, 2],
+          [25.4, 3],
+          [19, 2],
+          [10.9, 1],
+          [13.6, 3.2],
+          [10.9, 7.4],
+          [10.9, 0],
+          [10.9, 8.2],
+          [16.4, 0],
+          [16.4, 1.8],
+          [13.6, 0.3],
+          [13.6, 0],
+          [29.9, 0],
+          [27.1, 2.3],
+          [16.4, 0],
+          [13.6, 3.7],
+          [10.9, 5.2],
+          [16.4, 6.5],
+          [10.9, 0],
+          [24.5, 7.1],
+          [10.9, 0],
+          [8.1, 4.7],
+          [19, 0],
+          [21.7, 1.8],
+          [27.1, 0],
+          [24.5, 0],
+          [27.1, 0],
+          [29.9, 1.5],
+          [27.1, 0.8],
+          [22.1, 2],
+        ],
       },
       {
-        type: 'line',
+        type: 'scatter',
         name: '2022',
         itemStyle: { color: '#ec4899' },
         smooth: true,
-        data: data2022.value,
+        data: [
+          [36.4, 13.4],
+          [1.7, 11],
+          [5.4, 8],
+          [9, 17],
+          [1.9, 4],
+          [3.6, 12.2],
+          [1.9, 14.4],
+          [1.9, 9],
+          [1.9, 13.2],
+          [1.4, 7],
+          [6.4, 8.8],
+          [3.6, 4.3],
+          [1.6, 10],
+          [9.9, 2],
+          [7.1, 15],
+          [1.4, 0],
+          [3.6, 13.7],
+          [1.9, 15.2],
+          [6.4, 16.5],
+          [0.9, 10],
+          [4.5, 17.1],
+          [10.9, 10],
+          [0.1, 14.7],
+          [9, 10],
+          [12.7, 11.8],
+          [2.1, 10],
+          [2.5, 10],
+          [27.1, 10],
+          [2.9, 11.5],
+          [7.1, 10.8],
+          [2.1, 12],
+        ],
       },
     ],
   };
 });
-
-function onUpdate() {
-  const randomInt = (max = 99) => Math.floor(Math.random() * max) + 1;
-  data2021.value = Array.from({ length: 7 }, () => randomInt());
-  data2022.value = Array.from({ length: 7 }, () => randomInt());
-}
 </script>
 
 <template>
@@ -104,10 +177,6 @@ function onUpdate() {
     <h2 class="text-3xl font-bold my-4">Line Column</h2>
 
     <XCard>
-      <div class="flex justify-end mb-4 lg:mb-6">
-        <XButton @click="onUpdate">Update</XButton>
-      </div>
-
       <Echarts :option="lineColumnChartOption" class="w-full h-100" />
     </XCard>
   </section>
@@ -116,10 +185,6 @@ function onUpdate() {
     <h2 class="text-3xl font-bold my-4 pt-6">Line Scatter</h2>
 
     <XCard>
-      <div class="flex justify-end mb-4 lg:mb-6">
-        <XButton @click="onUpdate">Update</XButton>
-      </div>
-
       <Echarts :option="lineScatterChartOption" class="w-full h-100" />
     </XCard>
   </section>