chore: use ts in dashborad page

LaicZhang · Apr 22, 2022 · 0591971 · 0591971
1 parent 28c9a18
commit 0591971
Show file tree

Hide file tree

Showing 6 changed files with 231 additions and 260 deletions.
diff --git a/src/views/dashboard/Layout.vue b/src/views/dashboard/Layout.vue
@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useClipboard } from '@vueuse/core'
@@ -59,7 +59,7 @@ const shareCurrentWeather = async() => {
     userId: store.state.userInfo.userId,
   })
   if (data) {
-    const { text, copy } = useClipboard()
+    const { copy } = useClipboard()
     copy(`${shareForeUrl}?shareId=${data.shareId}`)
     ElMessage.success('分享链接已复制到剪切板，快去分享吧')
   }

diff --git a/src/views/echarts/AreaStack.vue b/src/views/echarts/AreaStack.vue
@@ -2,15 +2,16 @@
   <div id="area-stack" ref="myRef" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import * as echarts from 'echarts'
-import { defineComponent, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { getStackdataApi } from '@/api'
 import router from '@/router'
 
 const myRef = ref(null)
 const init = async() => {
-  const myChart = echarts.init(document.getElementById('area-stack'))
+  const element = document.getElementById('area-stack') as HTMLElement
+  const myChart = echarts.init(element)
   const currentRoute = router.currentRoute.value
   const ip = currentRoute.query.ip
   const stackData = await getStackdataApi({ ip })
@@ -28,7 +29,7 @@ const init = async() => {
       bottom: '10%',
     },
     xAxis: {
-      data: stackData.arr.map((item) => {
+      data: stackData.arr.map((item: any) => {
         return item[0]
       }),
     },
@@ -93,7 +94,7 @@ const init = async() => {
       {
         name: '最高温度',
         type: 'line',
-        data: stackData.arr.map((item) => {
+        data: stackData.arr.map((item: any) => {
           return item[1]
         }),
         markLine: {
@@ -123,7 +124,7 @@ const init = async() => {
       {
         name: '最低温度',
         type: 'line',
-        data: stackData.arr.map((item) => {
+        data: stackData.arr.map((item: any) => {
           return item[2]
         }),
         markLine: {

diff --git a/src/views/echarts/Bar1.vue b/src/views/echarts/Bar1.vue
@@ -2,99 +2,92 @@
   <div id="bar1" ref="myRef" />
 </template>
 
-<script>
+<script setup lang="ts">
 import * as echarts from 'echarts'
-import { defineComponent, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import store from '@/store'
 
-export default defineComponent({
-  name: 'Bar1',
-  setup() {
-    const myRef = ref(null)
-    const init = () => {
-      const myChart = echarts.init(document.getElementById('bar1'))
-      const futureDay = store.state.weatherData.futureDay
-      const week = []
-      const wtTemp1List = []
-      const wtTemp2List = []
-      futureDay.forEach((item) => {
-        week.push(item.week)
-        wtTemp1List.push(item.wtTemp1)
-        wtTemp2List.push(item.wtTemp2)
-      })
-      const option = {
-        title: {
-          text: '一周昼夜温差',
-          // subtext: 'Fake Data',
-        },
-        tooltip: {
-          trigger: 'axis',
-        },
-        legend: {
-          data: ['白天', '夜间'],
+const myRef = ref(null)
+const init = () => {
+  const element = document.getElementById('bar1') as HTMLElement
+  const myChart = echarts.init(element)
+  const futureDay = store.state.weatherData.futureDay
+  const week: Array<string> = []
+  const wtTemp1List: Array<number> = []
+  const wtTemp2List: Array<number> = []
+  futureDay.forEach((item: any) => {
+    week.push(item.week)
+    wtTemp1List.push(item.wtTemp1)
+    wtTemp2List.push(item.wtTemp2)
+  })
+  const option = {
+    title: {
+      text: '一周昼夜温差',
+      // subtext: 'Fake Data',
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    legend: {
+      data: ['白天', '夜间'],
+    },
+    //   toolbox: {
+    //     show: true,
+    //     feature: {
+    //       dataView: { show: true, readOnly: false },
+    //       magicType: { show: true, type: ['line', 'bar'] },
+    //       restore: { show: true },
+    //       saveAsImage: { show: true },
+    //     },
+    //   },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        // prettier-ignore
+        data: week,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: '白天',
+        type: 'bar',
+        data: wtTemp1List,
+        //   markPoint: {
+        //     data: [
+        //       { type: 'max', name: 'Max' },
+        //       { type: 'min', name: 'Min' },
+        //     ],
+        //   },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }],
         },
-        //   toolbox: {
-        //     show: true,
-        //     feature: {
-        //       dataView: { show: true, readOnly: false },
-        //       magicType: { show: true, type: ['line', 'bar'] },
-        //       restore: { show: true },
-        //       saveAsImage: { show: true },
-        //     },
+      },
+      {
+        name: '夜间',
+        type: 'bar',
+        data: wtTemp2List,
+        //   markPoint: {
+        //     data: [
+        //       { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+        //       { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 },
+        //     ],
         //   },
-        calculable: true,
-        xAxis: [
-          {
-            type: 'category',
-            // prettier-ignore
-            data: week,
-          },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-          },
-        ],
-        series: [
-          {
-            name: '白天',
-            type: 'bar',
-            data: wtTemp1List,
-            //   markPoint: {
-            //     data: [
-            //       { type: 'max', name: 'Max' },
-            //       { type: 'min', name: 'Min' },
-            //     ],
-            //   },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }],
-            },
-          },
-          {
-            name: '夜间',
-            type: 'bar',
-            data: wtTemp2List,
-            //   markPoint: {
-            //     data: [
-            //       { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
-            //       { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 },
-            //     ],
-            //   },
-            markLine: {
-              data: [{ type: 'average', name: 'Avg' }],
-            },
-          },
-        ],
-      }
-      myChart.setOption(option)
-    }
-    onMounted(() => {
-      init()
-    })
-    return {
-      myRef,
-    }
-  },
+        markLine: {
+          data: [{ type: 'average', name: 'Avg' }],
+        },
+      },
+    ],
+  }
+  myChart.setOption(option)
+}
+onMounted(() => {
+  init()
 })
 </script>