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

@@ -1,275 +1,206 @@
-<template>
-  <div>
-
-    <div class="statistics">
-      <panel-group :totaldata="list" />
-    </div>
-
-    <div class="chart">
-
-    </div>
-  </div>
-</template>
-
-<script>
-  import echarts from "echarts"
-  import PanelGroup from './components/PanelGroup'
-  import {
-    getChartsHome
-  } from "../../api/dashboard.js"
-
-  export default {
-    components: {
-      PanelGroup
-    },
-    data() {
-      return {
-        col: '',
-        line: '',
-        business_data: [],
-        collect_data: [],
-        list: {},
-        customerArr: [],
-        orderArr: [],
-        chartData: {},
-      }
-    },
-    watch: {
-      
-    },
-    methods: {
-      async loadData() {
-        
-      },
-      init() {
-        this.col = echarts.init(document.getElementById('col-chart'))
-        this.col.setOption({
-          title: {
-            text: ''
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              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: {
-                  color: 'rgb(42,182,252)'
-                },
-              },
-            },
-            {
-              name: '收款',
-              type: 'bar',
-              data: this.collect_data,
-              itemStyle: {
-                normal: {
-                  color: 'rgb(34,228,255)'
-                },
-              },
-            }
-          ]
-        })
-
-        this.line = echarts.init(document.getElementById('line-chart'))
-        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)'
-                },
-              },
-            }
-          ]
-        })
-      }
-    },
-    created() {
-
-      this.loadData();
-    },
-    mounted() {
-
-
-      //this.init()
-
-      window.onresize = () => {
-        this.col.resize()
-        this.line.resize()
-      }
-
-    },
-    destroyed() {
-      window.onresize = null
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .statistics {
-    display: flex;
-
-    margin-top: 20px;
-
-    &-title {
-
-      padding-left: 6px;
-    }
-
-    &-content {
-      text-align: center;
-      font-size: 13px;
-
-      &-top {
-
-        &__num {
-          font-weight: 600;
-        }
-
-        &__name {
-          font-size: 10px;
-          color: rgb(140, 140, 140);
-        }
-      }
-
-      &-bottom {
-        display: flex;
-        justify-content: space-between;
-
-        &-left {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
-        }
-
-        &-right {
-
-          &__num {
-            font-weight: 600;
-          }
-
-          &__name {
-            font-size: 10px;
-            color: rgb(140, 140, 140);
-          }
-        }
-      }
-    }
-
-    &>div {
-      flex: 1;
-      margin-right: 20px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
-
-  .chart {
-    display: flex;
-
-    margin-top: 20px;
-
-
-    .chartItem {
-
-      width: 49%;
-
-      .chartItemTitle {
-        font-size: 16px;
-        margin-bottom: 20px;
-      }
-
-      #col-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        margin-right: 20px;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-        width: 100%;
-      }
-
-      #line-chart {
-        background: #fff;
-        border-radius: 10px;
-        flex: 1;
-        padding: 20px;
-        box-sizing: border-box;
-        min-height: 400px;
-      }
-    }
-
-
-  }
+<template>
+  <div>
+
+    <div class="statistics">
+
+
+    </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>
+  </div>
+</template>
+
+<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,
+      Map
+    },
+    data() {
+      return {
+        col: '',
+        line: '',
+        business_data: [],
+        collect_data: [],
+        list: {},
+        customerArr: [],
+        orderArr: [],
+        chartData: {},
+        colorArr: {
+          "1": "#dbebf8",
+          "2": "#89badf",
+          "3": "#a1c7e6",
+          "4": "#559acf"
+        }
+      }
+    },
+    watch: {
+
+    },
+    methods: {
+      async loadData() {
+        this.loadPress()
+      },
+      loadPress() {
+        indexprogress({
+          year: this.year,
+          page_size: 999
+        }).then(res => {
+          var arr = [];
+          for (var mod of res.data) {
+            arr.push({
+              name: mod.province.name,
+              itemStyle: {
+                areaColor: this.colorArr[mod.status_id],
+                status:mod.status_id
+              }
+            })
+          }
+
+          this.chartData = arr;
+        })
+      },
+      init() {}
+    },
+    created() {
+
+      this.loadData();
+    },
+    mounted() {
+
+
+
+    },
+    destroyed() {
+      window.onresize = null
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .statistics {
+    display: flex;
+
+    margin-top: 20px;
+
+    &-title {
+
+      padding-left: 6px;
+    }
+
+    &-content {
+      text-align: center;
+      font-size: 13px;
+
+      &-top {
+
+        &__num {
+          font-weight: 600;
+        }
+
+        &__name {
+          font-size: 10px;
+          color: rgb(140, 140, 140);
+        }
+      }
+
+      &-bottom {
+        display: flex;
+        justify-content: space-between;
+
+        &-left {
+
+          &__num {
+            font-weight: 600;
+          }
+
+          &__name {
+            font-size: 10px;
+            color: rgb(140, 140, 140);
+          }
+        }
+
+        &-right {
+
+          &__num {
+            font-weight: 600;
+          }
+
+          &__name {
+            font-size: 10px;
+            color: rgb(140, 140, 140);
+          }
+        }
+      }
+    }
+
+    &>div {
+      flex: 1;
+      margin-right: 20px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .chart {
+    display: flex;
+
+    margin-top: 20px;
+
+
+    .chartItem {
+
+      width: 49%;
+
+      .chartItemTitle {
+        font-size: 16px;
+        margin-bottom: 20px;
+      }
+
+      #col-chart {
+        background: #fff;
+        border-radius: 10px;
+        flex: 1;
+        margin-right: 20px;
+        padding: 20px;
+        box-sizing: border-box;
+        min-height: 400px;
+        width: 100%;
+      }
+
+      #line-chart {
+        background: #fff;
+        border-radius: 10px;
+        flex: 1;
+        padding: 20px;
+        box-sizing: border-box;
+        min-height: 400px;
+      }
+    }
+
+
+  }
 </style>