组件状态查询

src/views/MarketingCenter/ProjectProgress/index.vue

@@ -1,71 +1,288 @@
 <template>
   <div class="app-container">
-    <el-card v-loading="loading">
-      <div id="myChart" :style="{width: '100%', height: '570px', margin: 'auto'}"/>
-    </el-card>
+    <el-row>
+      <el-col :span="12">
+        <el-card v-loading="loading1" style="height: 450px">
+          <span>项目完成进度查询</span>
+          <el-button size="small" type="success" icon="el-icon-search" @click="search1()">查询</el-button>
+          <div id="myChart1" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-loading="loading2" style="height: 450px">
+          <span>客户分布图</span>
+          <el-button size="small" type="success" icon="el-icon-search" @click="search2()">查询</el-button>
+          <div id="myChart2" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="12">
+        <el-card v-loading="loading3" style="height: 450px">
+          <span>年营销金额图表</span>
+          <el-button size="small" type="success" icon="el-icon-search" @click="search3()">查询</el-button>
+          <div id="myChart3" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-loading="loading4" style="height: 450px">
+          <span>在执行项目金额及回款</span>
+          <el-button size="small" type="success" icon="el-icon-search" @click="search4()">查询</el-button>
+          <div id="myChart4" :style="{width: '100%', height: '400px', margin: 'auto'}"/>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import { initProject } from '@/api/MarketingCenter/ProjectProgress'
+import { search1, search2, search3 } from '@/api/MarketingCenter/ProjectProgress'
 import echarts from 'echarts'
 
 export default {
   data() {
     return {
-      loading: false
+      loading1: false,
+      loading2: false,
+      loading3: false,
+      loading4: 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)
+    // 项目完成进度
+    search1() {
+      this.loading1 = true
+      var myChart1 = echarts.init(document.getElementById('myChart1'))
+      myChart1.clear()
+      search1().then(response => {
+        this.loading1 = false
+        this.drawLine1(response.data)
       })
     },
-    drawLine(data) {
-      this.dataX = []
+    drawLine1(data) {
+      var dataX = []
+      var lineData = []
       for (let i = 0; i < data.length; i++) {
-        this.dataX.push(data[i].项目名称)
+        dataX.push(data[i].项目名称)
+        lineData.push((Math.random() * 100).toFixed(2))
       }
-      var myChart = echarts.init(document.getElementById('myChart'))
-      myChart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
+      var myChart1 = echarts.init(document.getElementById('myChart1'))
+      myChart1.clear()
+      myChart1.setOption({
+        title: {
+          left: 'center',
+          text: '直方图'
         },
-        dataZoom: { // 实现缩放功能
-          show: true,
-          realtime: true,
-          start: 0,
-          end: 100
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis'
         },
         xAxis: {
           type: 'category',
           name: '项目名称',
-          data: this.dataX,
           axisLabel: {
             interval: 0,
-            rotate: 0,
+            rotate: 40,
             margin: 10
-          }
+          },
+          data: dataX
         },
         yAxis: {
           type: 'value',
-          name: '工时',
+          name: '完成进度(%)',
           min: 0,
           scale: 'true'
-        }
+        },
+        series: [
+          {
+            name: '测量值',
+            type: 'bar',
+            data: lineData,
+            label: {
+              normal: {
+                show: true,
+                position: 'top'
+              }
+            }
+          }
+        ]
+      })
+    },
+    // 客户分布图
+    search2() {
+      this.loading2 = true
+      var myChart2 = echarts.init(document.getElementById('myChart2'))
+      myChart2.clear()
+      search2().then(response => {
+        this.loading2 = false
+        this.drawLine2(response.data)
+      })
+    },
+    drawLine2(data) {
+      var dataX = []
+      var lineData = []
+      for (let i = 0; i < data.length; i++) {
+        dataX.push({
+          value: parseInt(data[i].客户数量),
+          name: data[i].省份
+        })
+        lineData.push(data[i].省份)
+      }
+      var myChart2 = echarts.init(document.getElementById('myChart2'))
+      myChart2.clear()
+      myChart2.setOption({
+        title: {
+          text: '客户分布图',
+          x: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: lineData
+        },
+        series: [
+          {
+            name: '省份',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: dataX,
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      })
+    },
+    // 年营销金额图表
+    search3() {
+      this.loading2 = true
+      var myChart3 = echarts.init(document.getElementById('myChart3'))
+      myChart3.clear()
+      search3().then(response => {
+        this.loading2 = false
+        this.drawLine3(response.data)
+      })
+    },
+    drawLine3(data) {
+      var dataX = []
+      var lineData = []
+      for (let i = 0; i < data.length; i++) {
+        dataX.push({
+          value: parseInt(data[i].客户数量),
+          name: data[i].省份
+        })
+        lineData.push(data[i].省份)
+      }
+      var myChart3 = echarts.init(document.getElementById('myChart3'))
+      myChart3.clear()
+      myChart3.setOption({
+        title: {
+          text: '客户分布图',
+          x: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: lineData
+        },
+        series: [
+          {
+            name: '省份',
+            type: 'pie',
+            radius: '55%',
+            center: ['50%', '60%'],
+            data: dataX,
+            itemStyle: {
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      })
+    },
+    search4() {
+      this.loading1 = true
+      var myChart1 = echarts.init(document.getElementById('myChart1'))
+      myChart1.clear()
+      search1().then(response => {
+        this.loading1 = false
+        this.drawLine1(response.data)
+      })
+    },
+    drawLine4(data) {
+      var dataX = []
+      var lineData = []
+      for (let i = 0; i < data.length; i++) {
+        dataX.push(data[i].项目名称)
+        lineData.push((Math.random() * 100).toFixed(2))
+      }
+      var myChart1 = echarts.init(document.getElementById('myChart1'))
+      myChart1.clear()
+      myChart1.setOption({
+        title: {
+          left: 'center',
+          text: '直方图'
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          name: '项目名称',
+          axisLabel: {
+            interval: 0,
+            rotate: 40,
+            margin: 10
+          },
+          data: dataX
+        },
+        yAxis: {
+          type: 'value',
+          name: '完成进度(%)',
+          min: 0,
+          scale: 'true'
+        },
+        series: [
+          {
+            name: '测量值',
+            type: 'bar',
+            data: lineData,
+            label: {
+              normal: {
+                show: true,
+                position: 'top'
+              }
+            }
+          }
+        ]
       })
-      this.loading = false
     }
   }
 }