feat : 研发投入资金饼图

src/views/home/index.vue

@@ -172,11 +172,13 @@
               <div class="money-container">
                 <div id="moneyPie" ref="moneyPie"></div>
               </div>
-              <div class="total-money">总资金：4,5000￥</div>
-              <div v-for="item in moneyData" class="legend">
-                <div></div>
-                <div>智汇未来科技公司</div>
-                <div>3000</div>
+              <div>
+                <div class="total-money">总资金：{{ toThousands(totalMoney) }}</div>
+                <div v-for="(item,index) in moneyData" class="legend">
+                  <div class="money-dot" :style="{'background-color': colorList[index]}"></div>
+                  <div class="company-name">{{ item.companyName }}</div>
+                  <div>{{ toThousands(item.money) }}</div>
+                </div>
               </div>
             </div>
             <div class="fund-pie" style="text-align: left;margin-left: 60px">研发投入资金统计图</div>
@@ -241,15 +243,30 @@
 <script setup lang="jsx">
 import 'element-plus/theme-chalk/display.css'
 import {useAuthStore} from '@/stores/userstore.js'
-
 import * as echarts from 'echarts'
+import {toThousands} from "@/utils/changePrice.js";
 
 const AuthStore = useAuthStore()
 const router = useRouter()
 const activeName = ref('first')
 const docActiveTab = ref('first')
+const totalMoney = ref('45000')
 const tableConfigBacklogRef = ref()
 const tableConfigReportRef = ref()
+const moneyData = ref([
+  {
+    companyName: '智汇未来科技公司',
+    money: '30000',
+  },
+  {
+    companyName: '云航信息技术公司',
+    money: '10000',
+  },
+  {
+    companyName: '融智投资管理公司',
+    money: '5000',
+  },
+])
 const taskTabList = ref([
   {
     title: '待立项',
@@ -593,6 +610,7 @@ const data = reactive({
   fundPieCharts: null,
   moneyPieCharts: null,
 })
+const colorList = ref(['#5c60ca', '#a159da', '#4bd566'])
 const fundPieOption = ref({
   tooltip: {
     trigger: 'item'
@@ -705,6 +723,7 @@ const moneyPieOption = ref({
   tooltip: {
     trigger: 'item'
   },
+  color: colorList,
   series: [
     {
       type: 'pie',
@@ -714,7 +733,9 @@ const moneyPieOption = ref({
         normal: {
           show: true,
           position: 'inner',
-          formatter: '{c}',
+          formatter: function (data) {
+            return toThousands(data.value)
+          }
         },
       },
       data: [
@@ -831,17 +852,45 @@ const handleView = (row) => {
 * {
   font-family: Source Sans Pro, Source Sans Pro;
 }
-.money-block{
-  display: flex;align-items: center;
-  .total-money{
-  height: 25px;
-  font-weight: 400;
-  font-size: 16px;
-  color: #000000;
-  line-height: 18px;
-}
-  .legend{
 
+.money-block {
+  display: flex;
+  align-items: center;
+
+  .total-money {
+    height: 25px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #000000;
+    line-height: 18px;
+  }
+
+  .legend {
+    margin-top: 14px;
+    display: flex;
+    align-items: center;
+
+    > div:last-child {
+      font-weight: 400;
+      font-size: 16px;
+      color: #000000;
+      letter-spacing: 1px;
+    }
+
+    .company-name {
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.6);
+      letter-spacing: 1px;
+      margin-left: 10px;
+      margin-right: 30px;
+      white-space: nowrap;
+    }
+
+    .money-dot {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+    }
   }
 }
 
@@ -884,7 +933,7 @@ const handleView = (row) => {
 
 :deep(.el-tabs__active-bar) {
   height: 1px !important;
-  background-color: #1476E3 !important;
+  //background-color: #1476E3 !important;
 }
 
 :deep(.el-tabs__new-tab ) {
@@ -911,6 +960,10 @@ const handleView = (row) => {
       width: 120px;
       font-weight: 600;
       height: 51px;
+      color: rgba(0, 0, 0, 0.5);
+    }
+
+    .el-tabs__item.is-active {
       color: #1476E3;
     }
   }