项目进度表

src/views/MarketingCenter/ProjectProgress/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="app-container">
+    <el-card v-loading="loading">
+      <div id="myChart" :style="{width: '100%', height: '570px', margin: 'auto'}"/>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { initProject } from '@/api/MarketingCenter/ProjectProgress'
+import echarts from 'echarts'
+
+export default {
+  data() {
+    return {
+      loading: false
+    }
+  },
+  mounted() {
+    this.search()
+  },
+  methods: {
+    search() {
+      this.loading = true
+      var myChart = echarts.init(document.getElementById('myChart'))
+      myChart.clear()
+      initProject().then(response => {
+        this.loading = false
+        this.drawLine(response.data)
+      })
+    },
+    drawLine(data) {
+      this.dataX = []
+      for (let i = 0; i < data.length; i++) {
+        this.dataX.push(data[i].项目名称)
+      }
+      var myChart = echarts.init(document.getElementById('myChart'))
+      myChart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        dataZoom: { // 实现缩放功能
+          show: true,
+          realtime: true,
+          start: 0,
+          end: 100
+        },
+        xAxis: {
+          type: 'category',
+          name: '项目名称',
+          data: this.dataX,
+          axisLabel: {
+            interval: 0,
+            rotate: 0,
+            margin: 10
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: '工时',
+          min: 0,
+          scale: 'true'
+        }
+      })
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>