修改项目详情的图表

2022-05-05 14:31:34 +08:00
parent c0e05cba0a
commit 921e4c5963
7 changed files with 393 additions and 71 deletions
@@ -0,0 +1,104 @@
+<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"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+
+  export default {
+    name: 'certificationProgress',
+    data() {
+      return {}
+    },
+    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: '待审查' },
+          { value: 735, name: '审查中' },
+          { value: 580, name: '审查完成' }
+        ]
+        this.getEcharts('main-left', '内部审查进度', ['#00BEBE', '#FDB033', '#2F8DF3'], 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>