CharBoxE.vue

<!--
 * @Author: your name
 * @Date: 2022-04-21 09:47:01
 * @LastEditTime: 2022-04-24 09:29:53
 * @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 { pingshanArr } from "@/utils/echarsMap/pingshan";
import axios from "axios";
const data = [
  {
    name: "古月镇",
    index: 0,
    a: 1,
    b: 1,
    c: 1,
    d: 1,
    e: 1,
    f: 1,
    g: "1/2",
    h: "1/2",
    i: "1/2",
  },
  {
    name: "西柏坡镇",
    index: 1,
    a: 2,
    b: 2,
    c: 2,
    d: 2,
    e: 2,
    f: 2,
    g: "2/3",
    h: "2/3",
    i: "2/3",
  },
  {
    name: "温塘镇",
    index: 2,
    a: 3,
    b: 3,
    c: 3,
    d: 3,
    e: 3,
    f: 3,
    g: "3/4",
    h: "3/4",
    i: "3/4",
  },
  {
    name: "平山镇",
    index: 3,
    a: 4,
    b: 4,
    c: 4,
    d: 4,
    e: 4,
    f: 4,
    g: "4/5",
    h: "4/5",
    i: "4/5",
  },
  {
    name: "东回舍镇",
    index: 4,
    a: 5,
    b: 5,
    c: 5,
    d: 5,
    e: 5,
    f: 5,
    g: "5/6",
    h: "5/6",
    i: "5/6",
  },
  {
    name: "西大吴乡",
    index: 5,
    a: 6,
    b: 6,
    c: 6,
    d: 6,
    e: 6,
    f: 6,
    g: "6/7",
    h: "6/7",
    i: "6/7",
  },
  {
    name: "岗南镇",
    index: 6,
    a: 7,
    b: 7,
    c: 7,
    d: 7,
    e: 7,
    f: 7,
    g: "7/8",
    h: "7/8",
    i: "7/8",
  },
  {
    name: "杨家桥乡",
    index: 7,
    a: 8,
    b: 8,
    c: 8,
    d: 8,
    e: 8,
    f: 8,
    g: "8/9",
    h: "8/9",
    i: "8/9",
  },
  {
    name: "下口镇",
    index: 8,
    a: 9,
    b: 9,
    c: 9,
    d: 9,
    e: 9,
    f: 9,
    g: "9/10",
    h: "9/10",
    i: "9/10",
  },
  {
    name: "北冶乡",
    index: 9,
    a: 10,
    b: 10,
    c: 10,
    d: 10,
    e: 10,
    f: 10,
    g: "10/11",
    h: "10/11",
    i: "10/11",
  },
  {
    name: "小觉镇",
    index: 10,
    a: 11,
    b: 11,
    c: 11,
    d: 11,
    e: 11,
    f: 11,
    g: "11/12",
    h: "11/12",
    i: "11/12",
  },
  {
    name: "下槐镇",
    index: 11,
    a: 12,
    b: 12,
    c: 12,
    d: 12,
    e: 12,
    f: 12,
    g: "12/13",
    h: "12/13",
    i: "12/13",
  },
  {
    name: "上三汲乡",
    index: 12,
    a: 13,
    b: 13,
    c: 13,
    d: 13,
    e: 13,
    f: 13,
    g: "13/14",
    h: "13/14",
    i: "13/14",
  },
  {
    name: "两河乡",
    index: 13,
    a: 14,
    b: 14,
    c: 14,
    d: 14,
    e: 14,
    f: 14,
    g: "14/15",
    h: "14/15",
    i: "14/15",
  },
  {
    name: "南甸镇",
    index: 14,
    a: 15,
    b: 15,
    c: 15,
    d: 15,
    e: 15,
    f: 15,
    g: "15/16",
    h: "15/16",
    i: "15/16",
  },
  {
    name: "东王坡乡",
    index: 15,
    a: 16,
    b: 16,
    c: 16,
    d: 16,
    e: 16,
    f: 16,
    g: "16/17",
    h: "16/17",
    i: "16/17",
  },
  {
    name: "苏家庄乡",
    index: 16,
    a: 17,
    b: 17,
    c: 17,
    d: 17,
    e: 17,
    f: 17,
    g: "17/18",
    h: "17/18",
    i: "17/18",
  },
  {
    name: "合河口乡",
    index: 17,
    a: 18,
    b: 18,
    c: 18,
    d: 18,
    e: 18,
    f: 18,
    g: "18/19",
    h: "18/19",
    i: "18/19",
  },
  {
    name: "蛟潭庄镇",
    index: 18,
    a: 19,
    b: 19,
    c: 19,
    d: 19,
    e: 19,
    f: 19,
    g: "19/20",
    h: "19/20",
    i: "19/20",
  },
  {
    name: "上观音堂乡",
    index: 19,
    a: 20,
    b: 20,
    c: 20,
    d: 20,
    e: 20,
    f: 20,
    g: "20/21",
    h: "20/21",
    i: "20/21",
  },
  {
    name: "营里乡",
    index: 20,
    a: 21,
    b: 21,
    c: 21,
    d: 21,
    e: 21,
    f: 21,
    g: "21/22",
    h: "21/22",
    i: "21/22",
  },
  {
    name: "孟家庄乡",
    index: 21,
    a: 22,
    b: 22,
    c: 22,
    d: 22,
    e: 22,
    f: 22,
    g: "22/23",
    h: "22/23",
    i: "22/23",
  },
  {
    name: "宅北乡",
    index: 22,
    a: 23,
    b: 23,
    c: 23,
    d: 23,
    e: 23,
    f: 23,
    g: "23/24",
    h: "23/24",
    i: "23/24",
  },
];

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 = { features: pingshanArr, type: "FeatureCollection" };
      console.log(geoJson);
      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>