refactor(demo): 重构demo页面组件为 script setup 语法 (#3293)

* refactor: charts demo use setup refactor * refactor: demo use script setup refactor * refactor: demo feat use script setup refactor * fix: tab-params * revert: settings.json * style(demo->Modal1): loading text line height * Update index.vue --------- Co-authored-by: invalid w <[email protected]>
vbenjs · Nov 18, 2023 · 3575106 · 3575106
1 parent cb90716
commit 3575106
Show file tree

Hide file tree

Showing 133 changed files with 2,796 additions and 3,902 deletions.
diff --git a/src/views/demo/charts/Line.vue b/src/views/demo/charts/Line.vue
@@ -1,117 +1,113 @@
 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
+<script lang="ts" setup>
+  import { PropType, ref, Ref, onMounted } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
   import { getLineData } from './data';
 
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
+  defineProps({
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: 'calc(100vh - 78px)',
+    },
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const { barData, lineData, category } = getLineData;
+
+  onMounted(() => {
+    setOptions({
+      backgroundColor: '#0f375f',
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
+          label: {
+            show: true,
+            backgroundColor: '#333',
+          },
+        },
       },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
+      legend: {
+        data: ['line', 'bar'],
+        textStyle: {
+          color: '#ccc',
+        },
       },
-    },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
-      const { barData, lineData, category } = getLineData;
-      onMounted(() => {
-        setOptions({
-          backgroundColor: '#0f375f',
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow',
-              label: {
-                show: true,
-                backgroundColor: '#333',
-              },
-            },
+      xAxis: {
+        data: category,
+        axisLine: {
+          lineStyle: {
+            color: '#ccc',
+          },
+        },
+      },
+      yAxis: {
+        splitLine: { show: false },
+        axisLine: {
+          lineStyle: {
+            color: '#ccc',
           },
-          legend: {
-            data: ['line', 'bar'],
-            textStyle: {
-              color: '#ccc',
-            },
+        },
+      },
+      series: [
+        {
+          name: 'line',
+          type: 'line',
+          smooth: true,
+          showAllSymbol: 'auto',
+          symbol: 'emptyCircle',
+          symbolSize: 15,
+          data: lineData,
+        },
+        {
+          name: 'bar',
+          type: 'bar',
+          barWidth: 10,
+          itemStyle: {
+            borderRadius: 5,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#14c8d4' },
+              { offset: 1, color: '#43eec6' },
+            ]),
           },
-          xAxis: {
-            data: category,
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
-              },
-            },
+          data: barData,
+        },
+        {
+          name: 'line',
+          type: 'bar',
+          barGap: '-100%',
+          barWidth: 10,
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: 'rgba(20,200,212,0.5)' },
+              { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
+              { offset: 1, color: 'rgba(20,200,212,0)' },
+            ]),
           },
-          yAxis: {
-            splitLine: { show: false },
-            axisLine: {
-              lineStyle: {
-                color: '#ccc',
-              },
-            },
+          z: -12,
+          data: lineData,
+        },
+        {
+          name: 'dotted',
+          type: 'pictorialBar',
+          symbol: 'rect',
+          itemStyle: {
+            color: '#0f375f',
           },
-          series: [
-            {
-              name: 'line',
-              type: 'line',
-              smooth: true,
-              showAllSymbol: 'auto',
-              symbol: 'emptyCircle',
-              symbolSize: 15,
-              data: lineData,
-            },
-            {
-              name: 'bar',
-              type: 'bar',
-              barWidth: 10,
-              itemStyle: {
-                borderRadius: 5,
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#14c8d4' },
-                  { offset: 1, color: '#43eec6' },
-                ]),
-              },
-              data: barData,
-            },
-            {
-              name: 'line',
-              type: 'bar',
-              barGap: '-100%',
-              barWidth: 10,
-              itemStyle: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: 'rgba(20,200,212,0.5)' },
-                  { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
-                  { offset: 1, color: 'rgba(20,200,212,0)' },
-                ]),
-              },
-              z: -12,
-              data: lineData,
-            },
-            {
-              name: 'dotted',
-              type: 'pictorialBar',
-              symbol: 'rect',
-              itemStyle: {
-                color: '#0f375f',
-              },
-              symbolRepeat: true,
-              symbolSize: [12, 4],
-              symbolMargin: 1,
-              z: -10,
-              data: lineData,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
+          symbolRepeat: true,
+          symbolSize: [12, 4],
+          symbolMargin: 1,
+          z: -10,
+          data: lineData,
+        },
+      ],
+    });
   });
 </script>
diff --git a/src/views/demo/charts/Map.vue b/src/views/demo/charts/Map.vue
@@ -1,75 +1,70 @@
 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, PropType, ref, Ref, onMounted } from 'vue';
-
-  import { useECharts } from '/@/hooks/web/useECharts';
+<script lang="ts" setup>
+  import { PropType, ref, Ref, onMounted } from 'vue';
+  import { useECharts } from '@/hooks/web/useECharts';
   import { mapData } from './data';
   import { registerMap } from 'echarts';
 
-  export default defineComponent({
-    props: {
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: 'calc(100vh - 78px)',
-      },
+  defineProps({
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
     },
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+    height: {
+      type: String as PropType<string>,
+      default: 'calc(100vh - 78px)',
+    },
+  });
 
-      onMounted(async () => {
-        const json = (await (await import('./china.json')).default) as any;
-        registerMap('china', json);
-        setOptions({
-          visualMap: [
-            {
-              min: 0,
-              max: 1000,
-              left: 'left',
-              top: 'bottom',
-              text: ['高', '低'],
-              calculable: false,
-              orient: 'horizontal',
-              inRange: {
-                color: ['#e0ffff', '#006edd'],
-                symbolSize: [30, 100],
-              },
-            },
-          ],
-          tooltip: {
-            trigger: 'item',
-            backgroundColor: 'rgba(0, 0, 0, .6)',
-            textStyle: {
-              color: '#fff',
-              fontSize: 12,
-            },
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  onMounted(async () => {
+    const json = (await (await import('./china.json')).default) as any;
+    registerMap('china', json);
+    setOptions({
+      visualMap: [
+        {
+          min: 0,
+          max: 1000,
+          left: 'left',
+          top: 'bottom',
+          text: ['高', '低'],
+          calculable: false,
+          orient: 'horizontal',
+          inRange: {
+            color: ['#e0ffff', '#006edd'],
+            symbolSize: [30, 100],
           },
-          series: [
-            {
-              name: 'iphone4',
-              type: 'map',
-              map: 'china',
-              label: {
-                show: true,
-                color: 'rgb(249, 249, 249)',
-                fontSize: 10,
-              },
-              itemStyle: {
-                areaColor: '#2f82ce',
-                borderColor: '#0DAAC1',
-              },
-              data: mapData,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
+        },
+      ],
+      tooltip: {
+        trigger: 'item',
+        backgroundColor: 'rgba(0, 0, 0, .6)',
+        textStyle: {
+          color: '#fff',
+          fontSize: 12,
+        },
+      },
+      series: [
+        {
+          name: 'iphone4',
+          type: 'map',
+          map: 'china',
+          label: {
+            show: true,
+            color: 'rgb(249, 249, 249)',
+            fontSize: 10,
+          },
+          itemStyle: {
+            areaColor: '#2f82ce',
+            borderColor: '#0DAAC1',
+          },
+          data: mapData,
+        },
+      ],
+    });
   });
 </script>