完成统计分析-概览页面

gassafetyprogress-web/src/assets/styles/all.scss

@@ -740,3 +740,9 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.echarts-tooltip{
+  background-color: transparent !important;
+  box-shadow:none !important;
+  // pointer-events:auto !important;
+  // top:-30px !important;
+}
\ No newline at end of file

gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/CharBoxE.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-21 09:47:01
+ * @LastEditTime: 2022-04-21 16:56:49
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/CharBoxE.vue
+-->
+<template>
+  <div class="chars-wrapper">
+    <Chars ref="chars" :options="options" />
+  </div>
+</template>
+
+<script>
+import Chars from "@/components/allCharsCom/Chars";
+import Infowindow from "./Infowindow";
+
+import axios from "axios";
+const data = [
+  {
+    name: "中西区",
+    value: 20057.34,
+    index: 0,
+    a: 1,
+    b: 1,
+    c: 1,
+    d: 1,
+    e: 1,
+    f: 1,
+    g: "1/2",
+    h: "1/2",
+    i: "1/2",
+  },
+  {
+    name: "湾仔",
+    value: 15477.48,
+    index: 1,
+    a: 2,
+    b: 2,
+    c: 2,
+    d: 2,
+    e: 2,
+    f: 2,
+    g: "2/3",
+    h: "2/3",
+    i: "2/3",
+  },
+  {
+    name: "东区",
+    value: 31686.1,
+    index: 2,
+    a: 3,
+    b: 3,
+    c: 3,
+    d: 3,
+    e: 3,
+    f: 3,
+    g: "3/4",
+    h: "3/4",
+    i: "3/4",
+  },
+  {
+    name: "南区",
+    value: 6992.6,
+    index: 3,
+    a: 4,
+    b: 4,
+    c: 4,
+    d: 4,
+    e: 4,
+    f: 4,
+    g: "4/5",
+    h: "4/5",
+    i: "4/5",
+  },
+  {
+    name: "油尖旺",
+    value: 44045.49,
+    index: 4,
+    a: 5,
+    b: 5,
+    c: 5,
+    d: 5,
+    e: 5,
+    f: 5,
+    g: "5/6",
+    h: "5/6",
+    i: "5/6",
+  },
+  {
+    name: "深水埗",
+    value: 40689.64,
+    index: 5,
+    a: 6,
+    b: 6,
+    c: 6,
+    d: 6,
+    e: 6,
+    f: 6,
+    g: "6/7",
+    h: "6/7",
+    i: "6/7",
+  },
+  {
+    name: "九龙城",
+    value: 37659.78,
+    index: 6,
+    a: 7,
+    b: 7,
+    c: 7,
+    d: 7,
+    e: 7,
+    f: 7,
+    g: "7/8",
+    h: "7/8",
+    i: "7/8",
+  },
+  {
+    name: "黄大仙",
+    value: 45180.97,
+    index: 7,
+    a: 8,
+    b: 8,
+    c: 8,
+    d: 8,
+    e: 8,
+    f: 8,
+    g: "8/9",
+    h: "8/9",
+    i: "8/9",
+  },
+  {
+    name: "观塘",
+    value: 55204.26,
+    index: 8,
+    a: 9,
+    b: 9,
+    c: 9,
+    d: 9,
+    e: 9,
+    f: 9,
+    g: "9/10",
+    h: "9/10",
+    i: "9/10",
+  },
+  {
+    name: "葵青",
+    value: 21900.9,
+    index: 9,
+    a: 10,
+    b: 10,
+    c: 10,
+    d: 10,
+    e: 10,
+    f: 10,
+    g: "10/11",
+    h: "10/11",
+    i: "10/11",
+  },
+  {
+    name: "荃湾",
+    value: 4918.26,
+    index: 10,
+    a: 11,
+    b: 11,
+    c: 11,
+    d: 11,
+    e: 11,
+    f: 11,
+    g: "11/12",
+    h: "11/12",
+    i: "11/12",
+  },
+  {
+    name: "屯门",
+    value: 5881.84,
+    index: 11,
+    a: 12,
+    b: 12,
+    c: 12,
+    d: 12,
+    e: 12,
+    f: 12,
+    g: "12/13",
+    h: "12/13",
+    i: "12/13",
+  },
+  {
+    name: "元朗",
+    value: 4178.01,
+    index: 12,
+    a: 13,
+    b: 13,
+    c: 13,
+    d: 13,
+    e: 13,
+    f: 13,
+    g: "13/14",
+    h: "13/14",
+    i: "13/14",
+  },
+  {
+    name: "北区",
+    value: 2227.92,
+    index: 13,
+    a: 14,
+    b: 14,
+    c: 14,
+    d: 14,
+    e: 14,
+    f: 14,
+    g: "14/15",
+    h: "14/15",
+    i: "14/15",
+  },
+  {
+    name: "大埔",
+    value: 2180.98,
+    index: 14,
+    a: 15,
+    b: 15,
+    c: 15,
+    d: 15,
+    e: 15,
+    f: 15,
+    g: "15/16",
+    h: "15/16",
+    i: "15/16",
+  },
+  {
+    name: "沙田",
+    value: 9172.94,
+    index: 15,
+    a: 16,
+    b: 16,
+    c: 16,
+    d: 16,
+    e: 16,
+    f: 16,
+    g: "16/17",
+    h: "16/17",
+    i: "16/17",
+  },
+  {
+    name: "西贡",
+    value: 3368,
+    index: 16,
+    a: 17,
+    b: 17,
+    c: 17,
+    d: 17,
+    e: 17,
+    f: 17,
+    g: "17/18",
+    h: "17/18",
+    i: "17/18",
+  },
+  {
+    name: "离岛",
+    value: 806.98,
+    index: 17,
+    a: 18,
+    b: 18,
+    c: 18,
+    d: 18,
+    e: 18,
+    f: 18,
+    g: "18/19",
+    h: "18/19",
+    i: "18/19",
+  },
+];
+
+export default {
+  name: "",
+  components: {
+    Chars,
+  },
+  data() {
+    return {
+      options: {},
+    };
+  },
+  mounted() {
+    this.getPath();
+
+    this.$refs.chars.myChats.on("mousedown", () => {
+      // this.closeToolTip();
+    });
+    this.$refs.chars.myChats.on("georoam", () => {
+      // this.closeToolTip();
+    });
+  },
+  methods: {
+    async getPath() {
+      const res = await axios(
+        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/geo/HK.json"
+      );
+      const geoJson = res.data;
+      this.$echarts.registerMap("HK", geoJson);
+      this.options = {
+        roam: true,
+        tooltip: {
+          trigger: "item",
+          triggerOn: "click",
+          enterable: true,
+          // alwaysShowContent: true,
+          // transitionDuration:0,
+          formatter: (p) => {
+            console.log("p",p)
+            const dom = this.createDom(p.data, this);
+            return dom;
+          },
+          borderWidth: 0,
+          padding: 0,
+          className: "echarts-tooltip",
+        },
+        series: [
+          {
+            name: "香港18区人口密度",
+            type: "map",
+            map: "HK",
+            label: {
+              show: true,
+              color: "#fff",
+              fontSize: 14,
+              fontWeight: 700,
+            },
+            select: {
+              // 地图选中区域样式
+              label: {
+                // 选中区域的label(文字)样式
+                color: "#ffffff",
+              },
+              itemStyle: {
+                // 选中区域的默认样式
+                areaColor: "#EEC25B",
+              },
+            },
+            itemStyle: {
+              // normal: {
+              borderWidth: 3, //边际线大小
+              borderColor: "#ffffff",
+              //边界线颜色
+              areaColor: "#1A91FF", //默认区域颜色
+              // areaShadowColor: "rgba(0, 0, 0, 0.5)",
+              // areaShadowBlur: 10,
+              // areaShadowOffsetY:0,
+              // areaShadowOffsetX:0,
+              // },
+            },
+            emphasis: {
+              show: true,
+              itemStyle: {
+                areaColor: "#EEC25B", //鼠标滑过区域颜色
+              },
+
+              label: {
+                show: true,
+                // textStyle: {
+                color: "#fff",
+                // },
+              },
+            },
+            data,
+            // 自定义名称映射
+            nameMap: {
+              "Central and Western": "中西区",
+              Eastern: "东区",
+              Islands: "离岛",
+              "Kowloon City": "九龙城",
+              "Kwai Tsing": "葵青",
+              "Kwun Tong": "观塘",
+              North: "北区",
+              "Sai Kung": "西贡",
+              "Sha Tin": "沙田",
+              "Sham Shui Po": "深水埗",
+              Southern: "南区",
+              "Tai Po": "大埔",
+              "Tsuen Wan": "荃湾",
+              "Tuen Mun": "屯门",
+              "Wan Chai": "湾仔",
+              "Wong Tai Sin": "黄大仙",
+              "Yau Tsim Mong": "油尖旺",
+              "Yuen Long": "元朗",
+            },
+          },
+        ],
+      };
+    },
+    createDom(data, parent) {
+      const Component = this.$Vue.extend(Infowindow);
+      const com = new Component();
+      // console.log(com.data=data)
+      return new Component({
+        data() {
+          return { data, parent };
+        },
+      }).$mount().$el;
+    },
+    closeToolTip() {
+      this.$refs.chars.myChats.dispatchAction({
+        type: "hideTip",
+      });
+      // const dom = document.getElementsByClassName('tooltip-box')[0];
+      // const parent =dom.parentElement;
+      // parent.removeChild(dom);
+      console.log("关闭");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.chars-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>

gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/Infowindow.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-04-21 13:50:28
+ * @LastEditTime: 2022-04-21 16:51:35
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/Infowindow.vue
+-->
+<template>
+  <div class="tooltip-box all-flex-h" ref="self">
+    <div class="title">{{ data.name }}详情信息</div>
+    <!-- <div v-show="true" @click="close" class="close"></div> -->
+    <div class="bottom-wrapper all-flex-h">
+      <div class="bottom flex">
+        <div class="left">驻村安全员</div>
+        <div class="middle"></div>
+        <div class="right">{{data.index}}名</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">燃气协管员</div>
+        <div class="middle"></div>
+        <div class="right">{{data.b}}名</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">气代煤</div>
+        <div class="middle"></div>
+        <div class="right">{{data.c}}个</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">电代煤</div>
+        <div class="middle"></div>
+        <div class="right">{{data.d}}个</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">隐患处置</div>
+        <div class="middle"></div>
+        <div class="right">{{data.e}}件</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">事故数量</div>
+        <div class="middle"></div>
+        <div class="right">{{data.f}}件</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">城镇用户/加装率</div>
+        <div class="middle"></div>
+        <div class="right">{{data.g}}%</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">农村用户/加装率</div>
+        <div class="middle"></div>
+        <div class="right">{{data.h}}%</div>
+      </div>
+
+      <div class="bottom flex">
+        <div class="left">单位用户/加装率</div>
+        <div class="middle"></div>
+        <div class="right">{{data.i}}%</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      data: null,
+    };
+  },
+  methods: {
+    close() {
+      const dom = document.getElementsByClassName("tooltip-box")[0];
+      const parent = dom.parentElement;
+      parent.removeChild(dom);
+      this.parent.closeToolTip();
+    },
+  },
+  mounted(){
+    console.log("data",this.data)
+  }
+};
+</script>
+<style lang="scss" scoped>
+.tooltip-box {
+  width: 213px;
+  height: 255px;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  box-shadow: inset 0px 0px 7px 1px rgba(255, 255, 255, 0.6);
+  border-radius: 3px;
+  font-size: 12px;
+  position: relative;
+  pointer-events: auto !important;
+  justify-content: space-between;
+
+  .title {
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 3px 0 3px 0;
+    padding: 4px 14px;
+  }
+  .close {
+    position: absolute;
+    top: 8px;
+    right: 15px;
+    font-size: 14px;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+    opacity: 1;
+    &:hover {
+      opacity: 0.8;
+    }
+    &:before,
+    &:after {
+      position: absolute;
+      right: 5px;
+      top: 0px;
+      content: "";
+      height: 12px;
+      width: 1px;
+      background-color: #fff;
+    }
+    &:before {
+      transform: rotate(45deg);
+    }
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+  .bottom-wrapper {
+    justify-content: space-between;
+    flex: 1;
+    box-sizing: border-box;
+    padding: 5px 0;
+    .bottom {
+      flex: 1;
+      padding: 0 14px;
+      font-size: 12px;
+
+      .left {
+      }
+      .right {
+        color: #eec25b;
+      }
+      .middle {
+        margin: 10px 2px;
+        flex: 1;
+        height: 1px;
+        background: repeating-linear-gradient(
+          90deg,
+          transparent 0px,
+          #fff 10px,
+          #fff 10px,
+          #fff 10px
+        );
+      }
+    }
+  }
+}
+</style>
+

gassafetyprogress-web/src/views/statistic/overview/conponents/Middle/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-04-19 09:46:51
- * @LastEditTime: 2022-04-19 10:02:17
+ * @LastEditTime: 2022-04-21 13:54:34
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/statistic/overview/conponents/Middle.vue
 -->
 <template>
   <div class="middle-components all-flex-h">
-    <div class="top"><img src="@/assets/image-overview/titlepic.jpg" alt=""></div>
-    <div class="bottom"></div>
+    <div class="top">
+      <img src="@/assets/image-overview/titlepic.jpg" alt="" />
+    </div>
+    <div class="bottom">
+      <CharsBoxE/>
+    </div>
   </div>
 </template>
 
 <script>
+import CharsBoxE from "./CharBoxE";
 export default {
   name: "",
+  components: {
+    CharsBoxE,
+  },
   data() {
     return {};
   },