完成工作项趋势图

src/components/TendencyChart.vue

@@ -4,29 +4,15 @@
 
 <script>
 import * as echarts from 'echarts'
+import request from "../utils/request";
+import moment from "moment";
 
 export default {
   name: "TendencyChart",
-  props: {
-    // 是否要上角图例
-    isLegend: {
-      type: Boolean,
-      default: false
-    },
-    // 是否为满圆
-    isRadius: {
-      type: Boolean,
-      default: false
-    },
-    // 数据列表
-    dataList: {
-      type: Array,
-      default: []
-    }
-  },
   data() {
+    this.myChart = null
     return {
-      myChart: null
+      chartData: []
     }
   },
   mounted() {
@@ -34,64 +20,90 @@ export default {
   },
   computed: {
     getTotalNumber() {
-      let total = this.dataList.reduce((prev, item) => {
+      return this.dataList.reduce((prev, item) => {
         prev += item.value
         return prev
-      }, 0)
+      }, 0);
-      return total;
     }
   },
   methods: {
     // 获取配置
     getOption() {
-      // 指定图表的配置项和数据
+
-      let option = {
+// 指定图表的配置项和数据
+      return {
         tooltip: {
-          trigger: 'item'
+          show: true,
+          showContent: true,
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
         },
+        legend: {
+          data: ['已完成', '未完成']
+        },
+        color: ['#91cc75', '#79bbff', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: this.chartData['已完成'].map((item) => {
+              return moment(item.taskDate * 1000).format("MM月DD日")
+            })
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
         series: [
           {
-            name: '统计',
+            name: '已完成',
-            type: 'pie',
+            type: 'line',
-            center: ['45%', '55%'],
+            stack: 'Total',
-            // radius: ['40%', '70%'],
+            areaStyle: {},
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: 'center'
-            },
             emphasis: {
-              label: {
+              focus: 'series'
-                show: true,
-                fontSize: '40',
-                fontWeight: 'bold'
-              }
             },
-            labelLine: {
+            data: this.chartData['已完成'].map((item) => {
-              show: false
+              return item.taskNum
+            })
           },
-            data: this.dataList
+          {
-          }
+            name: '未完成',
+            type: 'line',
+            stack: 'Total',
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            data: this.chartData['未关闭'].map((item) => {
+              return item.taskNum
+            })
+
+          },
+
         ]
       };
-      if (this.isLegend) {
+
-        option.legend = {
-          type: 'scroll',
-          orient: 'vertical',
-          right: 10,
-          top: 20,
-          bottom: 20,
-        }
-      }
-      option.series[0].radius = this.isRadius ? '80%' : ['50%', '80%'];
-      return option;
     },
     // 初始化图表
     initEcharts() {
       this.$nextTick(() => {
-        this.myChart = echarts.init(document.getElementById(this.id));
+        this.myChart = echarts.init(document.getElementById('TendencyChart'));
         // 使用刚指定的配置项和数据显示图表。
-        this.myChart.setOption(this.getOption());
+        this.updateEcharts();
       });
       let that = this;
       window.addEventListener('resize', function () {
@@ -104,7 +116,21 @@ export default {
     },
     // 更新图表
     updateEcharts() {
-      this.myChart.setOption(this.getOption(), true);
+      const that = this;
+      const projectId = this.$route.params.projectId;
+      request({
+        url: `project/${projectId}/task/stats/trend`,
+        method: "get",
+      }).then((response) => {
+        if (response.data.code === 200) {
+          that.chartData = response.data.data;
+          console.log(that.chartData);
+          that.myChart.setOption(this.getOption(), true);
+        }
+      }).catch(function (error) {
+        console.log(error);
+      });
+
     }
   }
 }

src/views/Home.vue

@@ -196,12 +196,12 @@ slide-left-enter-active,
 .slide-right-enter-active,
 .slide-right-leave-active {
   will-change: transform;
-  transition: all 500ms cubic-bezier(.55,0,.1,1);
+  transition: all 400ms cubic-bezier(.55,0,.1,1);
   backface-visibility: hidden;
 }
 .slide-right-enter-from {
   opacity: 0;
-  transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -30%, 0);
 }
 .slide-right-leave-to {
   opacity: 0;
@@ -209,7 +209,7 @@ slide-left-enter-active,
 }
 .slide-left-enter-from{
   opacity: 0;
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 30%, 0);
 }
 .slide-left-leave-to{
   opacity: 0;

src/views/ProjectInfo.vue

@@ -201,13 +201,13 @@
       </div>
     </div>
 
-    <div style="height: 300px;margin: 0 30px 30px 30px;
+    <div style="height: 500px;margin: 0 30px 30px 30px;
                 display: flex;flex-direction: row;justify-content: space-between">
       <div style="flex: 1;height: 100%;display: flex;flex-direction: column">
         <p class="p-title" style="margin-left: 10px">工作项统计</p>
         <div style="flex:1;margin-top: 30px;padding: 20px;
         display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;align-items: stretch">
-          <div style="background-color: #67c23a;flex: 1;"></div>
+          <TendencyChart style="flex: 1;"></TendencyChart>
         </div>
       </div>
     </div>
@@ -267,10 +267,11 @@ import {ref} from 'vue'
 import request from "@/utils/request";
 import moment from "moment";
 import EditProjectDialog from "../components/EditProjectDialog";
+import TendencyChart from "../components/TendencyChart";
 
 export default {
   name: "ProjectInfo",
-  components: {EditProjectDialog},
+  components: {EditProjectDialog, TendencyChart},
   data() {
     return {
       project: {
@@ -498,7 +499,7 @@ export default {
     },
     // 查询公告
     getannouncementList() {
-      var that = this;
+      const that = this;
       let projectId = this.$route.params.projectId;
       request({
         url: `project/${projectId}/announcement`,