From 51d96cddccd59e2fb7a2bdcf0481ae34fc7ff9f4 Mon Sep 17 00:00:00 2001
From: ww <ww.cn>
Date: Fri, 21 Jun 2024 21:24:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=94=A8=E6=88=B7=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E5=92=8Cecharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/components/Echart/Echarts.vue | 129 +++++++++++--------
 src/views/home/components/Echarts.vue        |   3 +-
 src/views/home/components/Status.vue         |  32 ++---
 src/views/home/index.vue                     |   8 +-
 4 files changed, 89 insertions(+), 83 deletions(-)

diff --git a/src/views/home/components/Echart/Echarts.vue b/src/views/home/components/Echart/Echarts.vue
index 9947fe9..af7d72a 100644
--- a/src/views/home/components/Echart/Echarts.vue
+++ b/src/views/home/components/Echart/Echarts.vue
@@ -7,79 +7,96 @@ onMounted(() => {
   // 绘制图表
   myChart.setOption({
     // 标题
-    grid: {
-      left: '4%', // 左边距
-      right: '10%', // 右边距
-      bottom: '20%', // 底边距
-      top: '10%', // 顶部边距
-    },
     tooltip: {
       trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999',
+        },
+      },
     },
-    legend: {
-      left: 'center', // 图例水平居中
-      bottom: 0, // 图例距离容器顶部的距离
-      orient: 'horizontal', // 水平布局
-      itemWidth: 16, // 设置图例标识的宽度为0，即不显示图标
-      itemHeight: 0, // 设置图例标识的高度为0，即不显示图标
-      data: ['本月', '上月'],
-    },
-    // grid: {
-    //   left: '3%',
-    //   right: '4%',
-    //   bottom: '3%',
-    //   containLabel: true
-    // },
     toolbox: {
       feature: {
-        saveAsImage: {},
+        dataView: { show: true, readOnly: false },
+        magicType: { show: true, type: ['line', 'bar'] },
+        restore: { show: true },
+        saveAsImage: { show: true },
       },
     },
-    xAxis: {
-      type: 'category',
-      boundaryGap: true,
-      data: [
-        '09-01',
-        '09-03',
-        '09-05',
-        '09-07',
-        '09-09',
-        '09-11',
-        '09-13',
-        '09-15',
-      ],
-    },
-    yAxis: {
-      type: 'value',
+    legend: {
+      data: ['本月', '上月'],
     },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '09-01',
+          '09-03',
+          '09-05',
+          '09-07',
+          '09-09',
+          '09-11',
+          '09-13',
+          '09-15',
+        ],
+        axisPointer: {
+          type: 'shadow',
+        },
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '浏览次数',
+        min: 0,
+        max: 200,
+        interval: 40,
+        axisLabel: {
+          formatter: '{value}',
+        },
+      },
+      {
+        type: 'value',
+        name: '',
+        min: 0,
+        max: 100,
+        interval: 20,
+        axisLabel: {
+          formatter: '{value}',
+        },
+      },
+    ],
     series: [
       {
         name: '本月',
-        // itemStyle: {
-        // color: '#0052D9'
-        // },
-        symbol: 'circle',
-        itemStyle: {
-          color: '#0052D9', // 设置圆的颜色为白色
-          borderWidth: 1.5, // 设置圆边框的宽度
-          borderColor: 'white', // 设置圆边框的颜色
+        type: 'bar',
+        tooltip: {
+          valueFormatter: function (value) {
+            return (value as number) + ' 次'
+          },
         },
-        symbolSize: 8, // 设置图标大小
-        type: 'line',
-        data: [20, 38, 60, 65, 90, 55, 36, 30],
+        data: [2, 4, 7, 23, 25, 76, 35, 62, 32, 20, 6, 3],
       },
       {
         name: '上月',
-        symbol: 'circle',
-        itemStyle: {
-          color: '#B5C7FF', // 设置圆的颜色为白色
-          borderWidth: 1.5, // 设置圆边框的宽度
-          borderColor: 'white', // 设置圆边框的颜色
+        type: 'bar',
+        tooltip: {
+          valueFormatter: function (value) {
+            return (value as number) + ' 次'
+          },
         },
-        symbolSize: 8, // 设置图标大小
+        data: [2, 5, 9, 26, 28, 70, 75, 82, 48, 18, 6, 2],
+      },
+      {
         type: 'line',
-
-        data: [22, 25, 48, 70, 80, 45, 24, 38],
+        yAxisIndex: 1,
+        data: [2, 4, 7, 23, 25, 76, 35, 62, 32, 20, 6, 3],
+      },
+      {
+        type: 'line',
+        yAxisIndex: 1,
+        data: [2, 5, 9, 26, 28, 70, 75, 82, 48, 18, 6, 2],
       },
     ],
   })
diff --git a/src/views/home/components/Echarts.vue b/src/views/home/components/Echarts.vue
index 33d7c2b..731afa9 100644
--- a/src/views/home/components/Echarts.vue
+++ b/src/views/home/components/Echarts.vue
@@ -1,10 +1,11 @@
 <script setup>
 import echarts from '@/views/home/components/Echart/Echarts.vue'
 import conheader from '@/views/home/components/ConHeader.vue'
+defineProps(['sum'])
 </script>
 <template>
   <div class="info_container" style="width: 95%; height: 384px">
-    <conheader title="主页访问数据(次)"></conheader>
+    <conheader :title="`主页访问数据(${sum}次)`"></conheader>
     <div class="info_content" style="width: 75%; height: 100%">
       <echarts></echarts>
     </div>
diff --git a/src/views/home/components/Status.vue b/src/views/home/components/Status.vue
index d650bf1..863458d 100644
--- a/src/views/home/components/Status.vue
+++ b/src/views/home/components/Status.vue
@@ -1,6 +1,7 @@
 <script setup>
 import add from '@/assets/images/add.png'
 // import { Plus } from '@element-plus/icons-vue'
+import tool from '@/utils/oss.js'
 import { userChangeService } from '@/api/user/user.js'
 const dialogFormVisible = ref(false)
 import { ref } from 'vue'
@@ -10,7 +11,6 @@ const props = defineProps({
   },
 })
 // const data = ref(props.data, 'dsfd')
-console.log(props.data, 44444)
 const imageUrl = ref('')
 //盒子隐藏
 const form = ref()
@@ -42,37 +42,21 @@ const formLabelWidth = '70px'
 //设置头像显示
 imageUrl.value = props.data.icon
 //设置头像更换
-const openFileInput = () => {
-  const input = document.createElement('input')
-  input.type = 'file'
-  input.accept = 'image/*'
-  input.style.display = 'none'
-  input.onchange = (event) => {
-    const file = event.target.files[0]
-    if (file) {
-      const reader = new FileReader()
-      reader.onload = () => {
-        imageUrl.value = reader.result
-      }
-      reader.readAsDataURL(file)
-      changeInfo()
-    }
-  }
-  document.body.appendChild(input)
-  input.click()
-  document.body.removeChild(input)
+const upload = async (option) => {
+  const res = await tool.oss.upload(option.file)
+  const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
+  imageUrl.value = url
+  changeInfo()
 }
 //修改用户信息
 const changeInfo = async () => {
   const userInfo = {
-    // username: form.value.username,
     phone: form.value.phone,
     id: form.value.id,
     nickName: form.value.nickName,
     icon: imageUrl.value,
   }
   const jsonData = JSON.stringify(userInfo)
-  console.log(jsonData)
   await userChangeService(jsonData)
   dialogFormVisible.value = false
 }
@@ -83,9 +67,9 @@ const changeInfo = async () => {
       <div class="avater">
         <img :src="imageUrl" alt="Uploaded" v-if="imageUrl" class="avater" />
       </div>
-      <div class="click" @click="openFileInput" :http-request="upload">
+      <el-upload class="click" :http-request="upload" :show-file-list="false">
         <img :src="add" />
-      </div>
+      </el-upload>
       <div
         class="info_content"
         style="height: 58px"
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 0077933..67b714a 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -19,9 +19,13 @@ const rightVisible = ref(false)
 userStore.getUserInfo().catch((error) => {
   console.log(error)
 })
-
+let sum: any = localStorage.getItem('sum') || '0'
 onMounted(() => {
   // getData()
+  sum = parseInt(sum) + 1
+  localStorage.setItem('sum', sum.toString())
+  console.log(sum, 'sum')
+
   username.value = userStore.userName
   data.value = userStore.data
   infoData.value = userStore.userInfo
@@ -48,7 +52,7 @@ onMounted(() => {
         <Info :data="infoData" v-if="flag"></Info>
       </div>
       <div class="echarts" style="width: 100%; height: 444px">
-        <echarts></echarts>
+        <echarts :sum="sum"></echarts>
       </div>
     </div>
     <div v-if="rightVisible" class="right">