asder

src/viewsCN/dashboardC/layout.vue

@@ -2,7 +2,7 @@
  * @Author: wuhao930406 1148547900@qq.com
  * @Date: 2023-08-16 11:24:18
  * @LastEditors: wuhao930406 1148547900@qq.com
- * @LastEditTime: 2023-08-17 14:10:38
+ * @LastEditTime: 2023-08-17 17:01:37
  * @FilePath: /vue3portal/src/viewsCN/dashboardC/layout.vue
  * @Description: 
  * 
@@ -35,13 +35,13 @@ const comps = {
 
 const state = reactive({
   systemTitleConfig: {
-    ani:true,
+    ani: true,
     width: 800,
     dur: 6,
     gradientReverse: true,
     decoration: true,
     decorationColorAlt: true,
-    gradientBG:true,
+    gradientBG: true,
   },
 
   panelTitleConfig: {
@@ -112,14 +112,14 @@ const state = reactive({
         },
         {
           id: "l3",
-          title: "活跃教师榜",
-          component: "echartBarHorizScroll",
+          title: "活跃学生榜",
+          component: "echartHill",
           border: "blank",
         },
         {
           id: "l1",
-          title: "行业收入占比",
-          component: "echartHill",
+          title: "活跃教师榜",
+          component: "echartBarHorizScroll",
           border: "blank",
         },
       ],

src/viewsCN/dashboardC/portlet/echarts-hill-group/echart-hill.vue

+<!--
+ * @Author: wuhao930406 1148547900@qq.com
+ * @Date: 2023-08-08 09:18:08
+ * @LastEditors: wuhao930406 1148547900@qq.com
+ * @LastEditTime: 2023-08-17 17:10:48
+ * @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echarts-hill-group/echart-hill.vue
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+-->
 <script setup>
-import symbols from "./svg"
-const state=reactive({
-  chartData:{
-    xAxis: ['软件', '硬件', '服务', '安全', '广告', '专利', '许可', '投资'],
-    colors:[$c.aql4,$c.cbl4,$c.aql3,],
-    data: [23, 40, 15, 12, 9, 7, 12, 5],
-    symbolSize:[
-        [20, 20],
-        [18, 20],
-        [18, 20],
-        [18, 20],
-        [20, 14],
-        [16, 20],
-        [20, 20],
-        [20, 20],
-    ]
+import { http } from "@/api/request";
+
+
+
+const state = reactive({
+  chartData: {
+    legend: ['活跃学生榜'],
+    colors: [$c.bll4, $c.aql4, $c.ipl3, $c.cbl3,],
   },
-  chartOption:{ }
+  chartOption: {}
 })
 
-const processData=()=>{
-  let {colors,xAxis,data,symbolSize}=state.chartData,
-      processedData=[],subData=[]
-  
-  data.forEach((item,i)=>{
-    subData.push({
-        value: data[i],
-        symbol: symbols['svg'+i],
-        symbolSize:symbolSize[i]
-      })
-  })
-  processedData.push({
-    name: 'hill',
-    type: 'pictorialBar',
-    barCategoryGap: '-130%',
-    // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
-    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
-    itemStyle: {
-      opacity: 0.5
-    },
-    emphasis: {
+const processData = (dataList) => {
+  let legend = state.chartData.legend,
+    colors = state.chartData.colors,
+    processedData = []
+  legend.forEach((item, i) => {
+    processedData.push({
+      name: legend[i],
+      type: 'line',
+      barWidth: 10,
+      label: {
+        show: false,
+        position: 'insideRight'
+      },
       itemStyle: {
-        opacity: 1
-      }
-    },
-    data: data,
-    z: 10
-  },
-  {
-    name: 'glyph',
-    type: 'pictorialBar',
-    barGap: '-100%',
-    symbolPosition: 'end',
-    symbolSize: 50,
-    symbolOffset: [0, '-120%'],
-    data: subData
+        color: colors[i],
+        borderRadius: 5
+      },
+      data: dataList?.map((item) => {
+        return item.count;
+      })
+    })
   })
-  state.chartOption.series=processedData;
-  state.chartOption.xAxis.data=xAxis;
+  state.chartOption.series = processedData;
+  state.chartOption.xAxis.data = dataList?.map(it => it.userName);
+  state.chartOption.legend.data = legend;
+  state.chartOption.legend.show = false;
+
 }
 
-const processOption=()=>{
-  const {colors}=state.chartData
-  state.chartOption={
-    update:false,
-    title:{ text:"单位:万元", right:0, top:0, textStyle:{ fontSize:16, fontWeight:"normal" }, },
+const processOption = (dataList) => {
+  state.chartOption = {
+    update: true,
+    // title:{ text:"barA", left:200, top:0, textStyle:{ color:$c.gyl3, fontSize:16, fontWeight:"normal" }, },
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'none'
-      },
-      formatter: function (params) {
-        return params[0].name + ': ' + params[0].value;
+        type: 'shadow'
       }
     },
+    legend: {
+      show: true,
+      data: [],
+      top: 0,
+      right: 10,
+    },
+    // toolbox: { feature: { magicType: { type: ['line', 'bar'] } }, },
     grid: {
-      left: '5%',
-      right: '8%',
-      bottom: '8%',
+      left: '16px',
+      right: '16px',
+      bottom: '5%',
       top: "25%",
       containLabel: true
     },
     yAxis: {
       type: 'value',
       splitNumber: 3,
-      axisLabel: {
-        show:false
-      }
+      axisLabel: { align: 'right' },
     },
     xAxis: {
       type: 'category',
-      boundaryGap: true,
       data: [],
-      axisTick: { show: false },
-      axisLine: { show:false, },
-      splitLine: { show:false, },
-      axisLabel: {
-        align: 'center'
-      }
+      axisLabel: { align: 'center' },
     },
-    color:colors,
     series: []
   }
-  processData()
+  processData(dataList)
 }
 
 onMounted(() => {
-  processOption();
+  //processOption();
+
+  http("POST", "/index/statistics/studentVisit", {}).then((res) => {
+    processOption(res?.data?.dataList);
+  })
 })
 </script>
 <template>
   <echartsInit :chartOption="state.chartOption"></echartsInit>
 </template>
-<style lang="less">
-</style>
+<style lang="less"></style>

vite.config.js

+/*
+ * @Author: wuhao930406 1148547900@qq.com
+ * @Date: 2023-08-08 09:18:08
+ * @LastEditors: wuhao930406 1148547900@qq.com
+ * @LastEditTime: 2023-08-17 17:11:38
+ * @FilePath: /vue3portal/vite.config.js
+ * @Description: 
+ * 
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
+ */
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 export default defineConfig({
   server: {
-    host: "127.0.0.1",
+    host: "192.168.40.100",
     proxy: {
       "/vstp/": {
         target: "http://192.168.40.117:8044/vstp",