【修改】首页统计图 增加表格

src/views/dashboard/AllMoneyTenEcharts.vue

@@ -258,7 +258,7 @@ export default {
             name:'合同金额',
             data: this.echartsData.allMoney,
             type: 'bar',
-            barMaxWidth:30,
+            barMaxWidth:20,
             itemStyle:{
               borderRadius:[8,8,0,0]
             }
@@ -267,7 +267,7 @@ export default {
             name:'确认收入金额',
             data: this.echartsData.confirmAmount,
             type: 'bar',
-            barMaxWidth:30,
+            barMaxWidth:20,
             itemStyle:{
               borderRadius:[8,8,0,0]
             }

src/views/dashboard/Analysis.vue

@@ -25,9 +25,9 @@
 
       <section class="wrap">
 
-        <!-- 未收账款统计 -->
+        <!-- 营收账款统计 -->
         <not-received-echarts class="m-t-10 not-receiced"></not-received-echarts>
-        <!--  未收账款统计 -->
+        <!--  营收账款统计 -->
 
 
         <!-- 收入分类统计 -->

src/views/dashboard/IncomeSortEcharts.vue

@@ -27,33 +27,33 @@
     </div>
     <div class="echarts-box" id="incomeSort"></div>
     <!--   表格区域beign -->
-<!--    <div style="width: 100%">-->
+    <div style="width: 100%">
-<!--      <a-table-->
+      <a-table
-<!--        ref="table"-->
+        ref="table"
-<!--        size="middle"-->
+        size="middle"
-<!--        bordered-->
+        bordered
-<!--        rowKey="projectId"-->
+        rowKey="projectId"
-<!--        :columns="columns"-->
+        :columns="columns"
-<!--        :scroll="{x: 500}"-->
+        :scroll="{x: 500}"
-<!--        :dataSource="dataSource"-->
+        :dataSource="dataSource"
-<!--        :pagination="false"-->
+        :pagination="false"
-<!--        class="j-table-force-nowrap main-table">-->
+        class="j-table-force-nowrap main-table">
 
-<!--        <template slot="text" slot-scope="text">-->
+        <template slot="text" slot-scope="text">
-<!--          <a-tooltip>-->
+          <a-tooltip>
-<!--            <template slot="title">{{ text }}</template>-->
+            <template slot="title">{{ text }}</template>
-<!--            <div class="table-text">{{ text }}</div>-->
+            <div class="table-text">{{ text }}</div>
-<!--          </a-tooltip>-->
+          </a-tooltip>
-<!--        </template>-->
+        </template>
 
-<!--        <template slot="allMoney" slot-scope="text">-->
+        <template slot="allMoney" slot-scope="text">
-<!--          <a-tooltip>-->
+          <a-tooltip>
-<!--            <template slot="title">{{ formatMoney(text) }}</template>-->
+            <template slot="title">{{ formatMoney(text) }}</template>
-<!--            <div class="table-text">{{ formatMoney(text) }}</div>-->
+            <div class="table-text">{{ formatMoney(text) }}</div>
-<!--          </a-tooltip>-->
+          </a-tooltip>
-<!--        </template>-->
+        </template>
-<!--      </a-table>-->
+      </a-table>
-<!--    </div>-->
+    </div>
     <!--   表格区域end -->
 
   </div>
@@ -202,8 +202,9 @@ export default {
         },
         legend: {
           bottom: '2%',
-          right: '5%',
+          right: '2%',
-          padding: [0, 10, 0, 20]
+          padding: [0,70, 0, 70],
+          itemGap:40 // 图例之间的间距
         },
         labelLine: {
           lineStyle: {
@@ -267,6 +268,13 @@ export default {
           scopedSlots: {customRender: 'allMoney'}
         },)
       })
+      // this.columns.push( {
+      //   title: '总数',
+      //   align: 'center',
+      //   width: 70,
+      //   dataIndex: 'allMoney',
+      //   scopedSlots: {customRender: 'text'}
+      // },)
     },
     // 处理圆点
     initPoint(data, color) {

src/views/dashboard/NotReceivedEcharts.vue

@@ -27,33 +27,33 @@
 <!--    </div>-->
     <div class="echarts-box" id="notReceived"></div>
     <!--   表格区域beign -->
-    <!--    <div style="width: 100%">-->
+        <div style="width: 100%">
-    <!--      <a-table-->
+          <a-table
-    <!--        ref="table"-->
+            ref="table"
-    <!--        size="middle"-->
+            size="middle"
-    <!--        bordered-->
+            bordered
-    <!--        rowKey="projectId"-->
+            rowKey="projectId"
-    <!--        :columns="columns"-->
+            :columns="columns"
-    <!--        :scroll="{x: 500}"-->
+            :scroll="{x: 500}"
-    <!--        :dataSource="dataSource"-->
+            :dataSource="dataSource"
-    <!--        :pagination="false"-->
+            :pagination="false"
-    <!--        class="j-table-force-nowrap main-table">-->
+            class="j-table-force-nowrap main-table">
 
-    <!--        <template slot="text" slot-scope="text">-->
+            <template slot="text" slot-scope="text">
-    <!--          <a-tooltip>-->
+              <a-tooltip>
-    <!--            <template slot="title">{{ text }}</template>-->
+                <template slot="title">{{ text }}</template>
-    <!--            <div class="table-text">{{ text }}</div>-->
+                <div class="table-text">{{ text }}</div>
-    <!--          </a-tooltip>-->
+              </a-tooltip>
-    <!--        </template>-->
+            </template>
 
-    <!--        <template slot="allMoney" slot-scope="text">-->
+            <template slot="allMoney" slot-scope="text">
-    <!--          <a-tooltip>-->
+              <a-tooltip>
-    <!--            <template slot="title">{{ formatMoney(text) }}</template>-->
+                <template slot="title">{{ formatMoney(text) }}</template>
-    <!--            <div class="table-text">{{ formatMoney(text) }}</div>-->
+                <div class="table-text">{{ formatMoney(text) }}</div>
-    <!--          </a-tooltip>-->
+              </a-tooltip>
-    <!--        </template>-->
+            </template>
-    <!--      </a-table>-->
+          </a-table>
-    <!--    </div>-->
+        </div>
     <!--   表格区域end -->
 
   </div>
@@ -153,25 +153,21 @@ export default {
       if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
         this.echartsInstace.dispose()//销毁
       }
-      let typeEnum = {
+
-        allMoney: 1,
+      getAction(this.url.list, {departCode:this.queryParam.departCode}).then(res => {
-        confirmAmount: 2,
-        income: 3
-      }
-      getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode}).then(res => {
         if (res.success) {
           let dataSource = res.result
           this.initColumns(res.result)
           this.initEcharts(res.result)
           // 将接口数据 转化成表格数据形式
           let tableData = [
-            {indexName: typeEnum[this.activeIndex] !== 2 ? '合同金额' : '确收金额'},
+            {indexName: '金额'},
-            {indexName: '百分比'}
+            // {indexName: '百分比'}
           ]
           dataSource.map((item, index) => {
             let dataIndex = 'key' + index
             tableData[0][dataIndex] = item.money
-            tableData[1][dataIndex] = item.value + '%'
+            // tableData[1][dataIndex] = item.value + '%'
           })
           this.dataSource = tableData
         }
@@ -204,7 +200,8 @@ export default {
         legend: {
           bottom: '2%',
           right: '5%',
-          padding: [0, 10, 0, 20]
+          padding: [0, 80, 0, 80],
+          itemGap:75
         },
         labelLine: {
           lineStyle: {
@@ -261,13 +258,20 @@ export default {
       ]
       data.map((item, index) => {
         this.columns.push({
-          title: item.name_dictText,
+          title: item.name,
           align: 'center',
-          width: 85,
+          width: 95,
           dataIndex: 'key' + index,
           scopedSlots: {customRender: 'allMoney'}
         },)
       })
+      // this.columns.push( {
+      //   title: '总数',
+      //   align: 'center',
+      //   width: 70,
+      //   dataIndex: 'allmoney',
+      //   scopedSlots: {customRender: 'text'}
+      // },)
     },
     // 处理圆点
     initPoint(data, color) {

src/views/dashboard/ThreeYearEcharts.vue

@@ -268,7 +268,7 @@ export default {
             name: '应收金额',
             data: this.echartsData.allMoney,
             type: 'bar',
-            barMaxWidth: 30,
+            barMaxWidth: 60,
             itemStyle: {
               borderRadius: [8, 8, 0, 0]
             }