up

src/views/dashboard/components/Map.vue

@@ -0,0 +1,137 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}" />
+
+</template>
+
+<script>
+  import echarts from 'echarts'
+  require('echarts/theme/macarons') // echarts theme
+  import resize from './mixins/resize'
+  import geoJson from '@/assets/china.json'
+
+  const animationDuration = 6000
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: 'chart'
+      },
+      width: {
+        type: String,
+        default: '100%'
+      },
+      height: {
+        type: String,
+        default: '500px'
+      },
+      chartData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        chart: null,
+        statusArr: {
+          "1": "待投档",
+          "2": "录取中",
+          "3": "录取结束",
+          "4": "已邮寄通知书"
+        }
+
+      }
+    },
+    mounted() {
+
+      console.log(geoJson)
+      this.$nextTick(() => {
+        this.initChart()
+      })
+    },
+    watch: {
+      chartData: {
+        deep: true,
+        handler(val) {
+          this.setOptions(val)
+        }
+      }
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+
+      initChart() {
+        this.chart = echarts.init(this.$el, 'macarons');
+        this.setOptions(this.chartData);
+      },
+      setOptions(chartdata) {
+        echarts.registerMap('CHINA', geoJson);
+        let statusArr=this.statusArr;
+        // 绘制图表
+        this.chart.setOption({
+          backgroundColor: "#c3e2ee",
+          zoom: 5,
+
+          tooltip: {
+            trigger: "item",
+            formatter: function(val) {
+              return "省份:"+val.name+"<br>当前进度: " + statusArr[val.data.itemStyle.status]; //
+            },
+          },
+          toolbox: {
+            show: true,
+            orient: "vertical",
+            left: "right",
+            top: "center",
+            feature: {
+              dataView: {
+                readOnly: false
+              },
+              restore: {},
+              saveAsImage: {},
+            },
+          },
+          series: [{
+            type: "map",
+            map: "CHINA", //这里需要注意呀,
+            // 是否开启鼠标缩放和平移漫游 默认不开启
+            itemStyle: {
+              normal: {
+                areaColor: "#e0e0e0",
+                borderColor: "#fff",
+                label: {
+                  show: false,
+                  color: "blue",
+                },
+              },
+              emphasis: {
+                areaColor: "#fd5d02",
+                label: {
+                  show: true,
+                  color: "white",
+                },
+              },
+            },
+            roam: true,
+            top: 70,
+            label: {
+              show: true, // 是否显示对应地名
+            },
+            data: chartdata
+          }],
+        });
+        this.chart.on("click", function(params) { //地图添加点击事件，当点击区域块的时候，params.name能够取到区域的名称：云南，北京...
+          alert(params.data.code);
+          console.log(JSON.stringify(params));
+        });
+
+      }
+    }
+  }
+</script>

src/views/dashboard/index.vue

@@ -2,9 +2,19 @@
   <div>
 
     <div class="statistics">
-      <panel-group :totaldata="list" />
+
+
     </div>
 
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <Map :chartData="chartData" />
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content bg-purple"></div>
+      </el-col>
+    </el-row>
+
     <div class="chart">
 
     </div>
@@ -14,13 +24,18 @@
 <script>
   import echarts from "echarts"
   import PanelGroup from './components/PanelGroup'
+  import Map from './components/Map'
   import {
     getChartsHome
   } from "../../api/dashboard.js"
 
+  import {
+    index as indexprogress
+  } from "../../api/unifiedRecruitment/progress"
   export default {
     components: {
-      PanelGroup
+      PanelGroup,
+      Map
     },
     data() {
       return {
@@ -32,6 +47,12 @@
         customerArr: [],
         orderArr: [],
         chartData: {},
+        colorArr: {
+          "1": "#dbebf8",
+          "2": "#89badf",
+          "3": "#a1c7e6",
+          "4": "#559acf"
+        }
       }
     },
     watch: {
@@ -39,112 +60,28 @@
     },
     methods: {
       async loadData() {
-        
+        this.loadPress()
       },
-      init() {
+      loadPress() {
-        this.col = echarts.init(document.getElementById('col-chart'))
+        indexprogress({
-        this.col.setOption({
+          year: this.year,
-          title: {
+          page_size: 999
-            text: ''
+        }).then(res => {
-          },
+          var arr = [];
-          tooltip: {
+          for (var mod of res.data) {
-            trigger: 'axis',
+            arr.push({
-            axisPointer: {
+              name: mod.province.name,
-              type: 'shadow'
-            },
-            position: 'bottom'
-          },
-          legend: {},
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          xAxis: {
-            type: 'category',
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          series: [{
-              name: '服务金额',
-              type: 'bar',
-              data: this.business_data,
               itemStyle: {
-                normal: {
+                areaColor: this.colorArr[mod.status_id],
-                  color: 'rgb(42,182,252)'
+                status:mod.status_id
-                },
+              }
-              },
+            })
-            },
+          }
-            {
-              name: '收款',
-              type: 'bar',
-              data: this.collect_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
 
-        this.line = echarts.init(document.getElementById('line-chart'))
+          this.chartData = arr;
-        this.line.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis'
-          },
-          legend: {
-            data: ['活跃客户', '服务订单']
-          },
-          grid: {
-            left: '3%',
-            right: '6%',
-            bottom: '3%',
-            containLabel: true
-          },
-          toolbox: {
-
-          },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: ['第一周', '第二周', '第三周', '第四周']
-          },
-          yAxis: {
-            type: 'value',
-          },
-          series: [{
-              name: '活跃客户',
-              type: 'line',
-              stack: 'Total',
-              data: this.customerArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '服务订单',
-              type: 'line',
-              stack: 'Total',
-              data: this.orderArr,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
         })
-      }
+      },
+      init() {}
     },
     created() {
 
@@ -153,12 +90,6 @@
     mounted() {
 
 
-      //this.init()
-
-      window.onresize = () => {
-        this.col.resize()
-        this.line.resize()
-      }
 
     },
     destroyed() {