优化首页折线图样式

blossom-web/src/views/index/ChartLineWords.vue

@@ -1,51 +1,42 @@
 <template>
   <div class="chart-line-log-root">
-    <div style="width: 100%;height: 100%;" ref="ChartLineLogRef" />
+    <div style="width: 100%; height: 100%" ref="ChartLineLogRef" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, onUnmounted } from "vue";
-import { articleWordLineApi } from "@/api/blossom";
+import { ref, onMounted, nextTick, onUnmounted } from 'vue'
+import { articleWordLineApi } from '@/api/blossom'
 // echarts
-import * as echarts from 'echarts/core';
-import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
-import { LineChart } from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
-import { LabelLayout } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
-echarts.use([TitleComponent, TooltipComponent, LegendComponent, LabelLayout, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition]);
+import * as echarts from 'echarts/core'
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { UniversalTransition } from 'echarts/features'
+import { LabelLayout } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  LabelLayout,
+  GridComponent,
+  LegendComponent,
+  LineChart,
+  CanvasRenderer,
+  UniversalTransition
+])
 
 // -------------------- data
 const ChartLineLogRef = ref<any>(null)
-let chartLineLog: any;
+let chartLineLog: any
 let chartData: any = {
-  statDates: [
-    '2022/07/01', '2022/08/01', '2022/09/01', '2022/10/01',
-    '2022/11/01', '2022/12/01', '2023/01/01', '2023/02/01',
-    '2023/03/01', '2023/04/01', '2023/05/01', '2023/06/01',
-    '2023/07/01', '2023/08/01', '2023/09/01', '2023/10/01',
-    '2023/11/01', '2023/12/01', '2024/01/01', '2024/02/01',
-    '2024/03/01', '2024/04/01', '2024/05/01', '2024/06/01'
-  ],
-  statValues: [
-    370300, 380300, 380300, 383300,
-    390000, 400000, 403200, 413200,
-    410300, 420000, 430000, 432631,
-    432631, 442631, 452631, 462631,
-    452631, 472631, 472631, 472631,
-    472631, 477631, 480631, 483631
-  ]
-};
-const rqLoading = ref<boolean>(true);
-
+  statDates: [],
+  statValues: []
+}
 const getWords = () => {
-  // chartData = resp.data;
   articleWordLineApi().then((resp) => {
     chartData = resp.data
-    renderChart(
-      setTimeout(() => { }, 300)
-    );
+    renderChart(setTimeout(() => {}, 300))
   })
 }
 
@@ -55,20 +46,25 @@ const getWords = () => {
  * @returns
  */
 const formartNumber = (param: number): string => {
-  let num: string = (param || 0).toString(), result: string = '';
+  let num: string = (param || 0).toString(),
+    result: string = ''
   while (num.length > 3) {
-    result = ',' + num.slice(-3) + result;
-    num = num.slice(0, num.length - 3);
+    result = ',' + num.slice(-3) + result
+    num = num.slice(0, num.length - 3)
   }
-  if (num) { result = num + result; }
-  return result;
+  if (num) {
+    result = num + result
+  }
+  return result
 }
 
 const renderChart = (callback?: any) => {
-  chartLineLog.setOption(
-    {
+  chartLineLog.setOption({
     title: {
-        bottom: 45, right: 25, text: '历史笔记字数', textStyle: {
+      bottom: 45,
+      right: 25,
+      text: '历史笔记字数',
+      textStyle: {
         fontSize: 14,
         fontFamily: 'Consolas, Monaco',
         color: '#5B5B5B'
@@ -156,19 +152,27 @@ const renderChart = (callback?: any) => {
         showSymbol: false,
         data: chartData.statValues,
         lineStyle: {
-            width: 3, cap: 'round',
+          width: 3,
+          cap: 'round',
           color: '#CDCDCD',
-            shadowColor: '#000000AC',
+          shadowColor: '#000000',
           shadowOffsetY: 5,
           shadowBlur: 10
         },
         itemStyle: {
-            color: '#CDCDCD',
+          color: '#CDCDCD'
         },
         areaStyle: {
           color: {
-              type: 'linear', x: 0, y: 0, x2: 0, y2: 0.5,
-              colorStops: [{ offset: 0, color: '#666666B3' }, { offset: 1, color: '#00000000' }]
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 0.5,
+            colorStops: [
+              { offset: 0, color: '#ABABABB3' },
+              { offset: 1, color: '#00000000' }
+            ]
           },
           shadowColor: '#666666',
           shadowOffsetY: 5,
@@ -176,32 +180,32 @@ const renderChart = (callback?: any) => {
         }
       }
     ]
-    }
-  )
+  })
   if (callback !== undefined) {
-    callback;
+    callback
   }
 }
 
 const reload = () => {
-  nextTick(() => { getWords(); })
+  nextTick(() => {
+    getWords()
+  })
 }
 
 const windowResize = () => {
-  chartLineLog.resize();
+  chartLineLog.resize()
 }
 
 onMounted(() => {
-  chartLineLog = echarts.init(ChartLineLogRef.value);
-  windowResize();
-  window.addEventListener("resize", windowResize)
+  chartLineLog = echarts.init(ChartLineLogRef.value)
+  windowResize()
+  window.addEventListener('resize', windowResize)
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', windowResize)
 })
 defineExpose({ reload, windowResize })
-
 </script>
 
 <style scoped lang="scss">
@@ -212,25 +216,26 @@ defineExpose({ reload, windowResize })
 
 <style lang="scss">
 .chart-line-word-tooltip {
-  @include box(150px, 60px);
-  border: 1px solid #CDCDCD19;
+  @include box(150px, 70px);
+  border: 1px solid #cdcdcd19;
   position: relative;
   z-index: 9999999;
-  background: #FFFFFF00;
+  background: #ffffff00;
   padding: 10px;
   box-shadow: none;
   backdrop-filter: blur(5px);
   border-radius: 5px;
 
-
   .xaxis-title {
-    @include font(15px, 700);
+    @include font(20px, 700);
     color: #cdcdcd;
   }
 
   .data {
     @include flex(row, space-between, center);
-    @include font(13px, 300);
+    @include font(18px, 300);
+    margin-top: 10px;
+    color: #a8a8a8;
   }
 
   &::before {