修改项目详情的图表

2022-05-05 14:31:34 +08:00
parent c0e05cba0a
commit 921e4c5963
7 changed files with 393 additions and 71 deletions
@@ -0,0 +1,145 @@
+<template>
+  <div class="box-content">
+    <div class="box-content-left">
+      <div id="main-left"></div>
+    </div>
+    <div class="box-content-right">
+      <div id="main-right">
+        <a-table
+          ref="table"
+          :loading="loading"
+          :pagination="false"
+          :scroll="{x: true}"
+          :data-source="dataSource"
+          :columns="columns"
+        >
+        </a-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'CurrentStatusOfTheProjectEcharts',
+    data() {
+      return {
+        loading:false,
+        dataSource:[],
+        columns:[
+          {
+            title: this.$t('nonConformity'),
+            align: 'center',
+            dataIndex: 'nonConformity',
+            scopedSlots: { customRender: 'titleName' }
+          },
+          {
+            title: this.$t('Tracked'),
+            align: 'center',
+            dataIndex: 'Tracked',
+            scopedSlots: { customRender: 'titleName' }
+          },
+          {
+            title: this.$t('accord'),
+            align: 'center',
+            dataIndex: 'accord',
+            scopedSlots: { customRender: 'titleName' }
+          },
+          {
+            title: this.$t('notEvaluated'),
+            align: 'center',
+            dataIndex: 'notEvaluated',
+            scopedSlots: { customRender: 'titleName' }
+          },
+        ],
+      }
+    },
+    mounted() {
+      this.mainLeftEcharts()
+    },
+    methods: {
+      getEcharts(chart, title, color, data) {
+        var myChart = echarts.init(document.getElementById(chart))
+        myChart.setOption({
+          title: {
+            text: title
+          },
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            itemWidth: 12,
+            itemHeight: 12,
+            bottom: '0',
+            left: 'center',
+            itemGap: 30,
+            icon: 'circle'
+          },
+          series: [
+            {
+              name: title,
+              type: 'pie',
+              radius: ['40%', '54%'],
+              avoidLabelOverlap: false,
+              label: {
+                show: false,
+                position: 'center'
+              },
+              labelLine: {
+                show: false
+              },
+              color: color,
+              data: data
+            }
+          ]
+        })
+      },
+      mainLeftEcharts() {
+        let data = [
+          { value: 1048, name: this.$t('nonConformity') },
+          { value: 735, name: this.$t('Tracked') },
+          { value: 580, name: this.$t('accord') },
+          { value: 580, name: this.$t('notEvaluated') }
+        ]
+        this.getEcharts('main-left', this.$t('CurrentStatusOfTheProject'), ['#2F8DF3', '#FF8543', '#37CED1', '#FDB033', '#9DB9D4'], data)
+      },
+
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .box-content {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    .box-content-left {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-left {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+
+    .box-content-right {
+      width: calc(50% - 12px);
+      height: 398px;
+      border: 2px #eff1f3 solid;
+
+      #main-right {
+        width: 100%;
+        height: 100%;
+        padding: 24px;
+        box-sizing: border-box;
+      }
+    }
+  }
+</style>