<!--
 * @Author: your name
 * @Date: 2022-04-21 09:47:01
 * @LastEditTime: 2023-07-20 09:10:00
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @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 { jingkaiquArr } from "@/utils/echarsMap/jingkaiqu";
import axios from "axios";
const data = [
  {
    name: "经开区",
    index: 0,
    a:0,
    b: 0,
    c: 0,
    d: 0,
    e: 0,
    f: 0,
    g: "0/0",
    h: "0/0",
    i: "0/0",
  }
];

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: jingkaiquArr, type: "FeatureCollection" };
      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,
          },
        ],
      };
    },
    createDom(data, parent) {
      const Component = this.$Vue.extend(Infowindow);
      const com = new Component();
      return new Component({
        data() {
          return { data, parent };
        },
      }).$mount().$el;
    },
    closeToolTip() {
      this.$refs.chars.myChats.dispatchAction({
        type: "hideTip",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.chars-wrapper {
  width: 100%;
  height: 100%;
}
</style>