From 259015ff618478223a70c4f051a622e7f3637a31 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Fri, 2 Feb 2024 21:27:51 +0800
Subject: [PATCH] 1,347th Commit

---
 .../(library)/charts/bar-column/+page.vue     |  18 +-
 .../(library)/charts/line-area/+page.vue      |  20 +--
 .../(library)/charts/mixed/+page.vue          | 111 +++++++++---
 .../(library)/charts/pie-donut/+page.vue      |  83 +++++++--
 .../(library)/charts/scatter-bubble/+page.vue | 165 ++++++++++++++++--
 5 files changed, 320 insertions(+), 77 deletions(-)

diff --git a/src/routes/(backstage)/(library)/charts/bar-column/+page.vue b/src/routes/(backstage)/(library)/charts/bar-column/+page.vue
index aa4cca99..71c02aff 100644
--- 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
index 6bb906ec..dd0a4368 100644
--- 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
index 33bfe1ca..d97a45c3 100644
--- 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>
diff --git a/src/routes/(backstage)/(library)/charts/pie-donut/+page.vue b/src/routes/(backstage)/(library)/charts/pie-donut/+page.vue
index cc10f6e9..6649fe54 100644
--- a/src/routes/(backstage)/(library)/charts/pie-donut/+page.vue
+++ b/src/routes/(backstage)/(library)/charts/pie-donut/+page.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { EChartsOption } from 'echarts';
-import { ref, computed } from 'vue';
+import { computed } from 'vue';
 import { XBreadcrumb, XCard } from '@x/ui';
 import { use } from 'echarts/core';
 import { PieChart } from 'echarts/charts';
@@ -9,15 +9,15 @@ import Echarts from '~/components/Echarts.vue';
 
 use([PieChart]);
 
-const dataBrowser = ref([
-  { value: 77.4, name: 'Chrome' },
-  { value: 10.6, name: 'Edge' },
-  { value: 4.9, name: 'Firefox' },
-  { value: 3.9, name: 'Safari' },
-  { value: 2.4, name: 'Opera' },
-]);
-
 const pieChartOption = computed<EChartsOption>(() => {
+  const dataBrowser = [
+    { value: 77.4, name: 'Chrome' },
+    { value: 10.6, name: 'Edge' },
+    { value: 4.9, name: 'Firefox' },
+    { value: 3.9, name: 'Safari' },
+    { value: 2.4, name: 'Opera' },
+  ];
+
   return {
     legend: {
       bottom: '2.5%',
@@ -31,7 +31,68 @@ const pieChartOption = computed<EChartsOption>(() => {
         name: 'Browser',
         radius: '60%',
         top: '-5%',
-        data: dataBrowser.value,
+        data: dataBrowser,
+      },
+    ],
+  };
+});
+
+const donutChartOption = computed<EChartsOption>(() => {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)',
+    },
+    legend: {
+      bottom: '2.5%',
+      data: [
+        'Direct',
+        'Marketing',
+        'Search Engine',
+        'Email',
+        'Union Ads',
+        'Video Ads',
+        'Baidu',
+        'Google',
+        'Bing',
+        'Others',
+      ],
+    },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: [0, '35%'],
+        label: {
+          position: 'inner',
+          fontSize: 14,
+        },
+        labelLine: {
+          show: false,
+        },
+        data: [
+          { value: 1548, name: 'Search Engine' },
+          { value: 775, name: 'Direct' },
+          { value: 679, name: 'Marketing', selected: true },
+        ],
+      },
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['40%', '60%'],
+        labelLine: {
+          length: 30,
+        },
+        data: [
+          { value: 1048, name: 'Baidu' },
+          { value: 335, name: 'Direct' },
+          { value: 310, name: 'Email' },
+          { value: 251, name: 'Google' },
+          { value: 234, name: 'Union Ads' },
+          { value: 147, name: 'Bing' },
+          { value: 135, name: 'Video Ads' },
+          { value: 102, name: 'Others' },
+        ],
       },
     ],
   };
@@ -55,7 +116,7 @@ const pieChartOption = computed<EChartsOption>(() => {
     <h2 class="text-3xl font-bold my-4 pt-6">Donut</h2>
 
     <XCard>
-      <!-- <Echarts :option="donutChartOption" class="w-full h-100" /> -->
+      <Echarts :option="donutChartOption" class="w-full h-100" />
     </XCard>
   </section>
 </template>
diff --git a/src/routes/(backstage)/(library)/charts/scatter-bubble/+page.vue b/src/routes/(backstage)/(library)/charts/scatter-bubble/+page.vue
index 044df183..f038fa05 100644
--- a/src/routes/(backstage)/(library)/charts/scatter-bubble/+page.vue
+++ b/src/routes/(backstage)/(library)/charts/scatter-bubble/+page.vue
@@ -2,16 +2,13 @@
 import type { EChartsOption } from 'echarts';
 import { computed } from 'vue';
 import { XBreadcrumb, XCard } from '@x/ui';
-import { use } from 'echarts/core';
+import { use, graphic } from 'echarts/core';
 import { ScatterChart } from 'echarts/charts';
 
 import Echarts from '~/components/Echarts.vue';
 
 use([ScatterChart]);
 
-// const data2021 = ref([40, 68, 86, 74, 56, 60, 87]);
-// const data2022 = ref([65, 78, 66, 44, 56, 67, 75]);
-
 const scatterChartOption = computed<EChartsOption>(() => {
   return {
     legend: {
@@ -19,7 +16,7 @@ const scatterChartOption = computed<EChartsOption>(() => {
       data: ['2021', '2022'],
     },
     grid: {
-      top: '5%',
+      top: '10%',
     },
     xAxis: {
       type: 'value',
@@ -116,11 +113,151 @@ const scatterChartOption = 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());
-// }
+const bubbleChartOption = computed<EChartsOption>(() => {
+  const data = [
+    [
+      [28604, 77, 17096869, 'Australia', 1990],
+      [31163, 77.4, 27662440, 'Canada', 1990],
+      [1516, 68, 1154605773, 'China', 1990],
+      [13670, 74.7, 10582082, 'Cuba', 1990],
+      [28599, 75, 4986705, 'Finland', 1990],
+      [29476, 77.1, 56943299, 'France', 1990],
+      [31476, 75.4, 78958237, 'Germany', 1990],
+      [28666, 78.1, 254830, 'Iceland', 1990],
+      [1777, 57.7, 870601776, 'India', 1990],
+      [29550, 79.1, 122249285, 'Japan', 1990],
+      [2076, 67.9, 20194354, 'North Korea', 1990],
+      [12087, 72, 42972254, 'South Korea', 1990],
+      [24021, 75.4, 3397534, 'New Zealand', 1990],
+      [43296, 76.8, 4240375, 'Norway', 1990],
+      [10088, 70.8, 38195258, 'Poland', 1990],
+      [19349, 69.6, 147568552, 'Russia', 1990],
+      [10670, 67.3, 53994605, 'Turkey', 1990],
+      [26424, 75.7, 57110117, 'United Kingdom', 1990],
+      [37062, 75.4, 252847810, 'United States', 1990],
+    ],
+    [
+      [44056, 81.8, 23968973, 'Australia', 2015],
+      [43294, 81.7, 35939927, 'Canada', 2015],
+      [13334, 76.9, 1376048943, 'China', 2015],
+      [21291, 78.5, 11389562, 'Cuba', 2015],
+      [38923, 80.8, 5503457, 'Finland', 2015],
+      [37599, 81.9, 64395345, 'France', 2015],
+      [44053, 81.1, 80688545, 'Germany', 2015],
+      [42182, 82.8, 329425, 'Iceland', 2015],
+      [5903, 66.8, 1311050527, 'India', 2015],
+      [36162, 83.5, 126573481, 'Japan', 2015],
+      [1390, 71.4, 25155317, 'North Korea', 2015],
+      [34644, 80.7, 50293439, 'South Korea', 2015],
+      [34186, 80.6, 4528526, 'New Zealand', 2015],
+      [64304, 81.6, 5210967, 'Norway', 2015],
+      [24787, 77.3, 38611794, 'Poland', 2015],
+      [23038, 73.13, 143456918, 'Russia', 2015],
+      [19360, 76.5, 78665830, 'Turkey', 2015],
+      [38225, 81.4, 64715810, 'United Kingdom', 2015],
+      [53354, 79.1, 321773631, 'United States', 2015],
+    ],
+  ];
+
+  return {
+    legend: {
+      bottom: '2.5%',
+      data: ['1990', '2015'],
+    },
+    grid: {
+      top: '10%',
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    xAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+    },
+    yAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+        },
+      },
+      scale: true,
+    },
+    series: [
+      {
+        name: '1990',
+        data: data[0],
+        type: 'scatter',
+        symbolSize(data) {
+          return Math.sqrt(data[2]) / 5e2;
+        },
+        emphasis: {
+          focus: 'series',
+          label: {
+            show: true,
+            formatter(param: any) {
+              return param.data[3];
+            },
+            position: 'top',
+          },
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(120, 36, 50, 0.5)',
+          shadowOffsetY: 5,
+          color: new graphic.RadialGradient(0.4, 0.3, 1, [
+            {
+              offset: 0,
+              color: 'rgb(251, 118, 123)',
+            },
+            {
+              offset: 1,
+              color: 'rgb(204, 46, 72)',
+            },
+          ]),
+        },
+      },
+      {
+        name: '2015',
+        data: data[1],
+        type: 'scatter',
+        symbolSize(data) {
+          return Math.sqrt(data[2]) / 5e2;
+        },
+        emphasis: {
+          focus: 'series',
+          label: {
+            show: true,
+            formatter(param: any) {
+              return param.data[3];
+            },
+            position: 'top',
+          },
+        },
+        itemStyle: {
+          shadowBlur: 10,
+          shadowColor: 'rgba(25, 100, 150, 0.5)',
+          shadowOffsetY: 5,
+          color: new graphic.RadialGradient(0.4, 0.3, 1, [
+            {
+              offset: 0,
+              color: 'rgb(129, 227, 238)',
+            },
+            {
+              offset: 1,
+              color: 'rgb(25, 183, 207)',
+            },
+          ]),
+        },
+      },
+    ],
+  };
+});
 </script>
 
 <template>
@@ -135,4 +272,12 @@ const scatterChartOption = computed<EChartsOption>(() => {
       <Echarts :option="scatterChartOption" class="w-full h-100" />
     </XCard>
   </section>
+
+  <section class="my-8">
+    <h2 class="text-3xl font-bold my-4 pt-6">Bubble</h2>
+
+    <XCard>
+      <Echarts :option="bubbleChartOption" class="w-full h-100" />
+    </XCard>
+  </section>
 </template>