Merge pull request 'feat : 专项资金饼图' (#761) from de into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/761

src/views/home/index.vue

@@ -145,9 +145,10 @@
             </div>
             <div>
               <div class="container">
-                <div id="rose" ref="rose"></div>
+                <div id="fundPie" ref="fundPie"></div>
               </div>
             </div>
+            <div class="fund-pie">专项资金项目统计图</div>
           </div>
 
         </div>
@@ -167,7 +168,20 @@
                 </el-icon>
               </div>
             </div>
+            <div class="money-block">
+              <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>
+            <div class="fund-pie" style="text-align: left;margin-left: 60px">研发投入资金统计图</div>
           </div>
+
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
@@ -576,32 +590,144 @@ const tableConfigReport = reactive({
 })
 
 const data = reactive({
-  pieCharts: null,
+  fundPieCharts: null,
+  moneyPieCharts: null,
 })
-const roseOption = ref({
+const fundPieOption = ref({
   tooltip: {
     trigger: 'item'
   },
   legend: {
-    top: 'bottom',
+    top: 'top',
+    orient: 'vertical',
+    left: '0',
+    bottom: '20',
+    align: 'left',
+    icon: 'circle',
+    textStyle: {
+      color: '#000',
+      fontSize: '14px'
+    },
+    formatter: function (name) {
+      let data = fundPieOption.value.series[0].data
+      // console.log(data, 'data')
+      let total = 0
+      let tarValue
+      for (let i = 0; i < data.length; i++) {
+        total += data[i].value
+        if (data[i].name == name) {
+          tarValue = data[i].value
+        }
+      }
+      let v = tarValue
+      let p = ((tarValue / total) * 100).toFixed(2)
+      return `${name}     ${v}     ${p}%`
+    },
+  },
+  graphic: {       //图形中间图片
+    elements: [{
+      type: 'image',
+      style: {
+        image: "people.png",//你的图片地址
+        width: 70,
+        height: 70
+      },
+      left: 'center',
+      top: '42%',
+    }]
   },
   series: [
     {
       type: 'pie',
-      radius: [80, 100],
+      radius: [85, 100],
       center: ['50%', '50%'],
+      top: '10%',
+      label: {
+        show: false,
+        formatter: '{b}: {c} ({d}%)',
+      },
       itemStyle: {
-        // borderRadius: 8
+        normal: {
+          color: function (params) {
+            const colorList = [
+              ['#6101ff', '#a965ff'],
+              ['#5cdcd3', '#5cdcd3'],
+            ];
+            const index = params.dataIndex;
+            return new echarts.graphic.LinearGradient(0, 0, 1, 1,
+                [{
+                  offset: 0,
+                  color: colorList[index][0]
+                },
+                  {
+                    offset: 1,
+                    color: colorList[index][1]
+                  }
+                ]);
+          }
+        }
       },
       data: [
-        {value: 10, name: '用户总数'},
+        {value: 75, name: '专项资金',},
-        {value: 50, name: '角色总数'},
+        {value: 20, name: '非专项资金',},
-      ]
+      ],
+    },
+    {
+      name: '',
+      type: 'pie',
+      top: '10%',
+      clockWise: false,
+      hoverAnimation: false,
+      radius: ['80%', '80%'],//边框大小
+      center: ['50%', '50%'],//边框位置
+      tooltip: {
+        show: false
+      },
+      label: {
+        show: false
+      },
+      emphasis: {
+        show: false
+      },
+      data: [{
+        value: 0,
+        itemStyle: {
+          normal: {
+            borderWidth: 1,//设置边框粗细
+            borderColor: 'rgba(0,0,0,0.1)'//边框颜色
+          }
+        }
+      }]
     }
   ]
 })
+const moneyPieOption = ref({
+  tooltip: {
+    trigger: 'item'
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: [0, 100],
+      center: ['50%', '50%'],
+      label: {
+        normal: {
+          show: true,
+          position: 'inner',
+          formatter: '{c}',
+        },
+      },
+      data: [
+        {value: 30000, name: '智汇未来科技公司',},
+        {value: 10000, name: '云航信息技术公司',},
+        {value: 5000, name: '融智投资管理公司',},
+      ],
+    },
+  ]
+})
 const init = () => {
-  data.pieCharts = echarts.init(document.getElementById('rose')).setOption(roseOption.value)
+  data.fundPieCharts = echarts.init(document.getElementById('fundPie')).setOption(fundPieOption.value)
+  data.moneyPieCharts = echarts.init(document.getElementById('moneyPie')).setOption(moneyPieOption.value)
 }
 
 onMounted(() => {
@@ -705,6 +831,34 @@ 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-container {
+  height: calc((100vh / 2) - 200px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+  width: 250px;
+
+  > div {
+
+    height: 300px;
+    flex: 1;
+  }
+}
 
 .container {
   height: calc((100vh / 2) - 200px);
@@ -1105,6 +1259,15 @@ const handleView = (row) => {
       border-radius: 10px;
       background-color: #ffffff;
 
+      .fund-pie {
+        width: 100%;
+        height: 25px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.5);
+        text-align: center;
+        margin-top: 15px;
+      }
+
       .title-block {
         display: flex;
         justify-content: space-between;