feat: 整合echarts,添加柱状图、饼图、漏斗和雷达图

package.json

@@ -11,6 +11,7 @@
     "@wangeditor/editor": "^0.13.6",
     "@wangeditor/editor-for-vue": "^5.1.8-6",
     "axios": "^0.24.0",
+    "echarts": "^5.2.2",
     "element-plus": "^1.2.0-beta.6",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",

src/App.vue

@@ -9,7 +9,7 @@ export default {
   name: 'App'
 }
 </script>
-<style >
+<style>
 /*表格未对齐*/
 .el-table__header col[name="gutter"] {
   display: table-cell !important;

src/directive/permission/index.ts

@@ -11,7 +11,7 @@ export const hasPerm: Directive = {
         if (roles.includes('ROOT')) {
             return true
         }
-        // 其他角色按钮权限校验
+        // 「其他角色」按钮权限校验
         const {value} = binding;
         if (value) {
             const requiredPerms = value; // DOM绑定需要的按钮权限标识

src/views/dashboard/components/BarChart.vue

@@ -0,0 +1,143 @@
+<!-- 柱状图 -->
+<template>
+  <div
+      :id="id"
+      :class="className"
+      :style="{height, width}"
+  />
+</template>
+
+<script setup lang="ts">
+import {nextTick, onMounted} from "vue";
+import {init, EChartsOption} from 'echarts'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'barChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+})
+
+function initChart() {
+  const barChart = init(document.getElementById(props.id) as HTMLDivElement)
+
+  barChart.setOption({
+    title: {
+      show: true,
+      text: '分公司业绩总览(2021年财报)',
+      x: 'center',
+      padding: 15,
+      textStyle: {
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color:'#096b92'
+      }
+    },
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        crossStyle: {
+          color: '#999'
+        }
+      }
+    },
+    legend: {
+      x: 'center',
+      y: 'bottom',
+      data: ['收入', '毛利润', '收入增长率', '利润增长率']
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽', '湖南', '山东','海外'],
+        axisPointer: {
+          type: 'shadow'
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        min: 0,
+        max: 10000,
+        interval: 2000,
+        axisLabel: {
+          formatter: '{value} '
+        }
+      },
+      {
+        type: 'value',
+        min: 0,
+        max: 100,
+        interval: 20,
+        axisLabel: {
+          formatter: '{value}%'
+        }
+      }
+    ],
+    series: [
+      {
+        name: '收入',
+        type: 'bar',
+        data: [
+          8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213
+        ],
+        barWidth : 20
+
+      },
+      {
+        name: '毛利润',
+        type: 'bar',
+        data: [
+           6200, 6500, 5500, 4500, 4200, 3800, 4200, 6700, 5213, 8000,8200, 7000
+        ],
+        barWidth : 20
+      },
+      {
+        name: '收入增长率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [42, 41, 53, 65, 67, 65, 52, 45, 43, 54, 42,46]
+      },
+      {
+        name: '利润增长率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [82, 81, 56, 45, 51, 65, 65, 67, 78, 76, 67, 78]
+      }
+    ]
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dashboard/components/FunnelChart.vue

@@ -0,0 +1,118 @@
+<!-- 漏斗图 -->
+<template>
+  <div
+      :id="id"
+      :class="className"
+      :style="{height, width}"
+  />
+</template>
+
+<script setup lang="ts">
+import {nextTick, onMounted} from "vue";
+import {init, EChartsOption} from 'echarts'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'funnelChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+})
+
+function initChart() {
+  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+
+  pieChart.setOption({
+    title: {
+      show: true,
+      text: '订单线索转化漏斗图',
+      x: 'center',
+      padding: 15,
+      textStyle: {
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color:'#096b92'
+      }
+    },
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    legend: {
+      x: 'center',
+      y: 'bottom',
+      data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
+    },
+
+    series: [
+      {
+        name: 'Funnel',
+        type: 'funnel',
+        left: '20%',
+        top: 60,
+        bottom: 60,
+        width: '60%',
+        min: 0,
+        max: 100,
+        minSize: '0%',
+        maxSize: '100%',
+        sort: 'descending',
+        gap: 2,
+        label: {
+          show: true,
+          position: 'inside'
+        },
+        labelLine: {
+          length: 10,
+          lineStyle: {
+            width: 1,
+            type: 'solid'
+          }
+        },
+        itemStyle: {
+          borderColor: '#fff',
+          borderWidth: 1
+        },
+        emphasis: {
+          label: {
+            fontSize: 20
+          }
+        },
+        data: [
+          { value: 60, name: 'Visit' },
+          { value: 40, name: 'Inquiry' },
+          { value: 20, name: 'Order' },
+          { value: 80, name: 'Click' },
+          { value: 100, name: 'Show' }
+        ]
+      }
+    ]
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dashboard/components/PieChart.vue

@@ -0,0 +1,94 @@
+<!-- 饼图 -->
+<template>
+  <div
+      :id="id"
+      :class="className"
+      :style="{height, width}"
+  />
+</template>
+
+<script setup lang="ts">
+import {nextTick, onMounted} from "vue";
+import {init, EChartsOption} from 'echarts'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'pieChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+})
+
+function initChart() {
+  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+
+  pieChart.setOption({
+    title: {
+      show: true,
+      text: '产品品类分部总览南丁格尔饼图',
+      x: 'center',
+      padding: 15,
+      textStyle: {
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color:'#096b92'
+      }
+    },
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    legend: {
+      top: 'bottom'
+    },
+    series: [
+      {
+        name: 'Nightingale Chart',
+        type: 'pie',
+        radius: [50, 180],
+        center: ['50%', '50%'],
+        roseType: 'area',
+        itemStyle: {
+          borderRadius: 8
+        },
+        data: [
+          { value: 22, name: 'rose 1' },
+          { value: 24, name: 'rose 2' },
+          { value: 32, name: 'rose 3' },
+          { value: 30, name: 'rose 4' },
+          { value: 28, name: 'rose 5' },
+          { value: 26, name: 'rose 6' },
+          { value: 22, name: 'rose 7' },
+          { value: 18, name: 'rose 8' }
+        ]
+      }
+    ]
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dashboard/components/RadarChart.vue

@@ -0,0 +1,101 @@
+<!-- 雷达图 -->
+<template>
+  <div
+      :id="id"
+      :class="className"
+      :style="{height, width}"
+  />
+</template>
+
+<script setup lang="ts">
+import {nextTick, onMounted} from "vue";
+import {init, EChartsOption} from 'echarts'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: 'radarChart'
+  },
+  className: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: '200px',
+    required: true
+  },
+  height: {
+    type: String,
+    default: '200px',
+    required: true
+  }
+})
+
+function initChart() {
+  const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
+
+  pieChart.setOption({
+    title: {
+      show: true,
+      text: '订单状态总雷达图',
+      x: 'center',
+      padding: 15,
+      textStyle: {
+        fontSize: 18,
+        fontStyle: 'normal',
+        fontWeight: 'bold',
+        color:'#096b92'
+      }
+    },
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '10%',
+      containLabel: true
+    },
+    legend: {
+      x: 'center',
+      y: 'bottom',
+      data: ['待支付', '已发货']
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: 'Sales', max: 6500 },
+        { name: 'Administration', max: 16000 },
+        { name: 'Information Technology', max: 30000 },
+        { name: 'Customer Support', max: 38000 },
+        { name: 'Development', max: 52000 },
+        { name: 'Marketing', max: 25000 }
+      ]
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: '待支付'
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: '已发货'
+          }
+        ]
+      }
+    ]
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/dashboard/index.vue

@@ -30,7 +30,7 @@
             <div class="card-panel-text">
               总访问量
             </div>
-            <div class="card-panel-num">123456 </div>
+            <div class="card-panel-num">123456</div>
           </div>
         </div>
       </el-col>
@@ -43,7 +43,7 @@
             <div class="card-panel-text">
               支付金额
             </div>
-            <div class="card-panel-num">123456 </div>
+            <div class="card-panel-num">123456</div>
           </div>
         </div>
       </el-col>
@@ -56,322 +56,25 @@
             <div class="card-panel-text">
               订单数
             </div>
-            <div class="card-panel-num">123456 </div>
+            <div class="card-panel-num">123456</div>
           </div>
         </div>
       </el-col>
     </el-row>
 
-    <el-row :gutter="40">
+    <BarChart id="barChart" height="400px" width="100%" class="bar-chart-container"/>
-      <el-col :span="12" :xs="24">
+
-        <el-card class="project-brief-introduction" style="height: 420px;">
+    <el-row :gutter="40" style="margin-top: 20px">
-          <div slot="header" class="clearfix">
+      <el-col :xs="24" :span="8">
-            <span>有来项目简介</span>
+        <PieChart id="pieChart" height="500px" width="100%" class="pie-chart-container"/>
-          </div>
-          <div style="font-size: 14px">
-            <div class="content">
-              <el-link target="_blank" style="font-weight: bold" type="primary" href="https://gitee.com/youlaitech/youlai-mall">
-                youlai-mall
-              </el-link>
-              是基于Spring Boot 2.5.0、Spring Cloud 2020 &
-              Alibaba 2021、vue、element-ui、uni-app快速构建的一套全栈开源商城项目。
-              <el-divider/>
-              项目采用微服务、前后端分离开发模式。
-              <br/>
-              汇集全栈主流的技术栈；
-              涉及
-              <el-link target="_blank" type="primary" size="mini" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
-              、
-              <el-link target="_blank" type="success" size="mini" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
-              、
-              <el-link target="_blank" type="warning" size="mini" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序</el-link>
-              和
-              <el-link target="_blank" type="danger" size="mini" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
-              等多端的开发。
-            </div>
-            <el-divider/>
-            <el-row :gutter="10">
-              <el-col :span="8">
-                <el-badge value="免费开源" style="font-weight: bold">
-                  项目源码地址
-                </el-badge>
-              </el-col>
-              <el-col :span="8">
-                <el-link target="_blank" type="primary" href="https://github.com/hxrui">github</el-link>
-              </el-col>
-              <el-col :span="8">
-                <el-link target="_blank" type="success" href="https://gitee.com/haoxr">码云</el-link>
-              </el-col>
-            </el-row>
-            <el-divider/>
-            <el-row :gutter="10">
-              <el-col :span="8" style="font-weight: bold">
-                接口文档地址
-              </el-col>
-              <el-col :span="8">
-                <el-link target="_blank" type="primary" href="http://www.youlai.tech:9999/doc.html">线上</el-link>
-              </el-col>
-              <el-col :span="8">
-                <el-link target="_blank" type="success" href="http://localhost:9999/doc.html">本地</el-link>
-              </el-col>
-            </el-row>
-            <el-divider/>
-            <el-row :gutter="10">
-              <el-col :span="8" style="font-weight: bold">
-                后端技术栈
-              </el-col>
-              <el-col :span="16">
-                Spring Boot、Spring Cloud、Spring Cloud Alibaba、Spring Security OAuth2、JWT、Mybatis-Plus、Seata、Sentinel、ELK、Redis
-              </el-col>
-            </el-row>
-            <el-divider/>
-            <el-row :gutter="10">
-              <el-col :span="8" style="font-weight: bold">
-                前端技术栈
-              </el-col>
-              <el-col :span="16">
-                vue、element-ui、uni-app、vue-element-admin
-              </el-col>
-            </el-row>
-          </div>
-        </el-card>
       </el-col>
 
-      <el-col :span="12" :xs="24">
+      <el-col :xs="24" :span="8">
-        <el-card class="technology-stack" style="height: 420px;">
+        <FunnelChart id="funnelChart" height="500px" width="100%" class="pie-chart-container"/>
-          <div slot="header" class="clearfix">
-            <span>联系信息</span>
-          </div>
-          <div style="font-size: 14px">
-            <el-tabs v-model="contactActiveName">
-              <el-tab-pane label="开发人员" name="1">
-                <el-row :gutter="5">
-                  <el-col :span="8">
-                    <el-card :body-style="{ padding: '0px' }" align="center">
-                      <el-image
-                        style="width: 60px; height: 60px"
-                        src="https://gitee.com/haoxr/image/raw/master/hxr.jpg"
-                        :preview-src-list="['https://gitee.com/haoxr/image/raw/master/hxr.jpg']">
-                      </el-image>
-                      <div style="padding: 6px;">
-                        <span tyle="font-size: 14px">郝先瑞</span>
-                        <div class="bottom clearfix" style="margin-top: 5px">
-                          <el-tag  size="mini">后端</el-tag>
-                          <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
-                          <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
-                        </div>
-                      </div>
-                    </el-card>
-                  </el-col>
-                    <el-col :span="8">
-                      <el-card :body-style="{ padding: '0px' }" align="center">
-                        <el-image
-                            style="width: 60px; height: 60px"
-                            src="https://gitee.com/haoxr/image/raw/master/20210606203219.png"
-                            :preview-src-list="['https://gitee.com/haoxr/image/raw/master/20210606203219.png']">
-                        </el-image>
-                        <div style="padding: 6px;">
-                          <span>Mr.</span>
-                          <div class="bottom clearfix" style="margin-top: 5px">
-                            <el-tag  size="mini">后端</el-tag>
-                            <el-tag type="success" style="margin-left: 5px" size="mini">前端</el-tag>
-                            <el-tag type="danger" style="margin-left: 5px" size="mini">运维</el-tag>
-                          </div>
-                        </div>
-                      </el-card>
-                    </el-col>
-                    <el-col :span="8">
-                      <el-card :body-style="{ padding: '0px' }" align="center">
-                        <el-image
-                            style="width: 60px; height: 60px"
-                            src="  https://gitee.com/haoxr/image/raw/master/20210606203659.png"
-                            :preview-src-list="['https://gitee.com/haoxr/image/raw/master/20210606203659.png']">
-                        </el-image>
-                        <div style="padding: 6px;">
-                          <span>???</span>
-                          <div class="bottom clearfix" style="margin-top: 5px">
-                            <el-tag type="warning" size="mini">??</el-tag>
-                          </div>
-                        </div>
-                      </el-card>
       </el-col>
 
-                </el-row>
+      <el-col :xs="24" :span="8">
-              </el-tab-pane>
+        <RadarChart id="radarChart" height="500px" width="100%" class="pie-chart-container"/>
-              <el-tab-pane label="微信群" name="2">
-                <el-image
-                  style="width: 210px; height: 210px"
-                  src="https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png"
-                  :preview-src-list="['https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png']">
-                </el-image>
-                <el-link style="margin-top: 10px" type="danger" :underline="false">群二维码过期，请添加开发人员微信备注“有来”</el-link>
-              </el-tab-pane>
-              <el-tab-pane label="微信小程序体验码" name="3">
-                <el-image
-                  style="width: 210px; height: 210px"
-                  src="https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png"
-                  :preview-src-list="['https://gitee.com/haoxr/image/raw/master/default/%E5%9B%A2%E9%98%9FLOGO_%E5%89%AF%E6%9C%AC.png']">
-                </el-image>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row :gutter="40">
-      <el-col :span="6" :xs="24">
-        <el-card class="technology-stack">
-          <div slot="header" class="clearfix">
-            <span>更新日志</span>
-          </div>
-          <div style="font-size: 14px">
-            <el-collapse v-model="updateLogActiveName" accordion>
-              <el-collapse-item name="1">
-                <template slot="title">
-                  v1.0.0 - 2021.06.06
-                  <el-tooltip content="版本重大更新" placement="right">
-                    <i style="margin-left: 5px;color: red" class="header-icon el-icon-star-on"></i>
-                  </el-tooltip>
-                </template>
-                <div>1. 权限重构，RESTFul URL权限和按钮权限数据归并</div>
-                <div>2. 新增角色编码逻辑</div>
-                <div>3. 网关新增本地公钥的方式</div>
-                <div>4. 认证中心移除MySQL数据源</div>
-                <div>5. OAuth2客户端官方表oauth_client_details重命名sys_oauth_client</div>
-                <div>6. 自定义实现ClientDetailsService接口loadClientByClientId方法</div>
-                <div>7. JWT的权限属性authorities将角色ID调整为角色编码</div>
-                <div>8. 网关统一鉴权优化，设置了权限规则的请求进行拦截鉴权</div>
-                <div>9. 菜单、角色管理界面针对小尺寸屏幕友好优化</div>
-                <div>10. Spring Boot升级 2.4.4 <i class="el-icon-right"></i> 2.5.0</div>
-                <div>11. Spring Cloud升级 2020.0.2<i class="el-icon-right"></i>2020.0.3</div>
-                <div>12. Spring Cloud Alibaba升级 2020.0.RC1<i class="el-icon-right"></i>2021.1</div>
-                <div>13. Nacos服务升级 2.0.0<i class="el-icon-right"></i>2.0.1</div>
-                <div>14. 表字段统一调整gmt_create<i class="el-icon-right"></i>create_time，gmt_update<i
-                  class="el-icon-right"></i>update-time
-                </div>
-                <div>15. 前端管理控制台优化</div>
-                <div>16. JWT的密钥对修改，youlai.jks<i class="el-icon-right"></i>jwt.jks</div>
-              </el-collapse-item>
-            </el-collapse>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="6" :xs="24">
-        <el-card class="technology-stack">
-          <div slot="header" class="clearfix">
-            <span>计划事项</span>
-          </div>
-          <div style="font-size: 14px">
-            <todo-list/>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="12" :xs="24">
-        <el-card class="technology-stack">
-          <div slot="header" class="clearfix">
-            <span>项目文档</span>
-          </div>
-          <div style="font-size: 14px">
-            <el-tabs v-model="documentActiveName">
-              <el-tab-pane label="后端文档" name="1">
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13581881.html">1. Spring Cloud实战 |
-                  第一篇：Windows搭建Nacos服务
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13584204.html">2. Spring Cloud实战 |
-                  第二篇：Spring Cloud整合Nacos实现注册中心
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13585125.html">3. Spring Cloud实战 |
-                  第三篇：Spring Cloud整合Nacos实现配置中心
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13608650.html">4. Spring Cloud实战 |
-                  第四篇：Spring Cloud整合Gateway实现API网关
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13615592.html">5. Spring Cloud实战 |
-                  第五篇：Spring Cloud整合OpenFeign实现微服务之间的调用
-                </el-link>
-                <el-divider/>
-                <el-badge value="热">
-                  <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13719356.html">6. Spring Cloud实战 |
-                    第六篇：Spring Cloud Gateway+Spring Security OAuth2+JWT实现微服务统一认证授权
-                  </el-link>
-                </el-badge>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13740264.html">7. Spring Cloud实战
-                  |
-                  最七篇：Spring Cloud Gateway+Spring Security OAuth2集成统一认证授权平台下实现注销使JWT失效方案
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14022632.html">8. Spring Cloud实战
-                  |
-                  最八篇：Spring Cloud +Spring Security OAuth2+ Vue前后端分离模式下无感知刷新实现JWT续期
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14028366.html">9. Spring Cloud实战
-                  |
-                  最九篇：Spring Security OAuth2认证服务器统一认证自定义异常处理
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14280184.html">10. Spring Cloud&
-                  Alibaba 实战 | 第十篇 ：Spring Cloud + Nacos整合Seata 1.4.1最新版本实现微服务架构中的分布式事务，进阶之路必须要迈过的槛
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14396990.html">11. Spring Cloud &
-                  Alibaba 实战 | 第十一篇 ：Spring Cloud Gateway网关实现对RESTful接口权限和按钮权限细粒度控制
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/14720405.html">12. Spring Cloud &
-                  Alibaba 实战 | 第十二篇： Sentinel+Nacos实现流控、熔断降级，赋能拥有降级功能的Feign新技能熔断，做到熔断降级双剑合璧
-                </el-link>
-              </el-tab-pane>
-              <el-tab-pane label="前端文档" name="2">
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13624548.html">
-                  1. vue-element-admin实战 | 第一篇： 移除mock接入微服务接口，搭建SpringCloud+Vue前后端分离管理平台
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary" href="https://www.cnblogs.com/haoxianrui/p/13676619.html">
-                  2. vue-element-admin实战 | 第二篇： 最小改动接入后台实现根据权限动态加载菜单
-                </el-link>
-              </el-tab-pane>
-
-              <el-tab-pane label="微信小程序文档" name="3">
-                <el-badge value="荐" style="margin-top: 10px">
-                  <el-link target="_blank" type="primary"
-                           href="https://www.cnblogs.com/haoxianrui/p/13882310.html">
-                    1. vue+uni-app商城实战 | 第一篇：从0到1快速开发一个商城微信小程序，无缝接入Spring Cloud
-                    OAuth2认证授权登录
-                  </el-link>
-                </el-badge>
-              </el-tab-pane>
-              <el-tab-pane label="应用部署文档" name="4" align="center">
-
-                <svg-icon style="width: 200px;height: 200px;" icon-class="await"/>
-
-              </el-tab-pane>
-              <el-tab-pane name="5">
-                <span slot="label" class="start-doc">
-                  <el-badge value="必读" style="margin-top:8px;">
-                    <div style="margin-top: -10px">项目启动说明</div>
-                  </el-badge>
-                </span>
-                <el-link target="_blank" type="primary"
-                         href="https://gitee.com/youlaitech/youlai-mall#1-%E5%90%8E%E5%8F%B0%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%90%AF%E5%8A%A8">1. 后端微服务启动
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary"
-                         href="https://gitee.com/youlaitech/youlai-mall#2-%E5%90%8E%E5%8F%B0%E5%89%8D%E7%AB%AF%E5%90%AF%E5%8A%A8">2. 管理前端启动
-                </el-link>
-                <el-divider/>
-                <el-link target="_blank" type="primary"
-                         href="https://gitee.com/youlaitech/youlai-mall#3-%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%AF%E5%8A%A8">3. 微信小程序启动
-                </el-link>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
-        </el-card>
       </el-col>
     </el-row>
 
@@ -382,7 +85,12 @@
 import GithubCorner from '@/components/GithubCorner/index.vue'
 import TodoList from './components/TodoList/index.vue'
 import {computed, reactive, toRefs} from "vue";
+
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import BarChart from "./components/BarChart.vue";
+import PieChart from "./components/PieChart.vue";
+import RadarChart from "./components/RadarChart.vue";
+import FunnelChart from "./components/FunnelChart.vue";
 
 import {useUserStoreHook} from "@/store/modules/user"
 
@@ -390,14 +98,13 @@ const roles = computed(() => useUserStoreHook().roles);
 const avatar = computed(() => useUserStoreHook().avatar);
 const nickname = computed(() => useUserStoreHook().nickname);
 
-
+const state = reactive({
-const state =reactive({
   updateLogActiveName: '1',
   contactActiveName: '1',
   documentActiveName: '1'
 })
 
-const {updateLogActiveName,contactActiveName,documentActiveName}  = toRefs(state)
+const {updateLogActiveName, contactActiveName, documentActiveName} = toRefs(state)
 
 </script>
 
@@ -409,22 +116,6 @@ const {updateLogActiveName,contactActiveName,documentActiveName}  = toRefs(state
   background-color: rgb(240, 242, 245);
   position: relative;
 
-  .project-brief-introduction {
-    .el-divider--horizontal {
-      margin: 16px 0;
-    }
-
-    .content {
-      line-height: 20px;
-    }
-
-    margin-bottom: 24px;
-  }
-
-  .technology-stack {
-    margin-bottom: 24px;
-  }
-
   .github-corner {
     position: absolute;
     top: 0px;
@@ -505,33 +196,37 @@ const {updateLogActiveName,contactActiveName,documentActiveName}  = toRefs(state
 
     .icon-people {
       color: #40c9c6;
-      .svg-icon{
+
-        width: 3em!important;
+      .svg-icon {
-        height: 3em!important;
+        width: 3em !important;
+        height: 3em !important;
       }
     }
 
     .icon-message {
       color: #36a3f7;
-      .svg-icon{
+
-        width: 3em!important;
+      .svg-icon {
-        height: 3em!important;
+        width: 3em !important;
+        height: 3em !important;
       }
     }
 
     .icon-money {
       color: #f4516c;
-      .svg-icon{
+
-        width: 3.2em!important;
+      .svg-icon {
-        height: 3.2em!important;
+        width: 3.2em !important;
+        height: 3.2em !important;
       }
     }
 
     .icon-shopping {
       color: #34bfa3;
-      .svg-icon{
+
-        width: 3em!important;
+      .svg-icon {
-        height: 3em!important;
+        width: 3em !important;
+        height: 3em !important;
       }
     }
 
@@ -562,6 +257,13 @@ const {updateLogActiveName,contactActiveName,documentActiveName}  = toRefs(state
     }
   }
 
+  .bar-chart-container {
+    background: #ffffff;
+  }
+
+  .pie-chart-container {
+    background: #ffffff;
+  }
 }
 
 </style>