<!--  -->
<template>
  <div class="pestbox">
    <div
      :style="{ height: '100%', width: '100%' }"
      id="mychart"
      ref="mychart"
    ></div>
    <div class="piebox">
      <p class="iconbox el-icon-arrow-left" @click="pietf = !pietf"></p>
      <div class="piedatabox" v-show="pietf">
        <div
          :style="{ height: '100%', width: '100%' }"
          id="mychartpie"
          ref="mychartpie"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import * as echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      pietf: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init() {
      let myChart = echarts.init(document.getElementById("mychart"));
      const mapData = require("./json/shenzhen.json");
      const name = "深圳";
      echarts.registerMap(name, mapData);
      const mapData2 = require("./json/shanwei.json");
      const name2 = "汕尾";
      echarts.registerMap(name2, mapData2);
      const mapData3 = require("./json/huizhou.json");
      const name3 = "惠州";
      echarts.registerMap(name3, mapData3);

      // let myChart = echarts.init(document.getElementById("mychart"));
      window.addEventListener("resize", function () {
        undefined;
        myChart.resize();
      });
      myChart.setOption({
        title: {
          text: "有害生物占比",
          subtext: "data from https://www.haidilao.com/",
          sublink: "https://www.haidilao.com/",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        backgroundColor: "#252b45",
        title: {
          left: "center",
          textStyle: {
            color: "#000",
          },
        },
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          inRange: {
            color: ["#50a3ba", "#eac736", "#d94e5d"],
          },
          textStyle: {
            color: "#fff",
          },
        },
        geo: [
          {
            map: "深圳",
            label: {
              normal: {
                show: true,
                color: "#fff",
              },
              emphasis: {
                show: true,
              },
            },
            roam: true, //是否允许缩放
            layoutCenter: ["25%", "60%"], //地图位置
            layoutSize: "95%",
            itemStyle: {
              normal: {
                color: "#031525", //地图背景色
                borderColor: "rgba(100,149,237,1)", //省市边界线
              },
              emphasis: {
                color: "rgba(37, 43, 61, .5)", //悬浮背景
              },
            },
          },
          {
            map: "惠州",
            label: {
              normal: {
                show: true,
                color: "#fff",
              },
              emphasis: {
                show: true,
              },
            },
            roam: true, //是否允许缩放
            layoutCenter: ["65%", "48%"], //地图位置
            layoutSize: "90%",
            itemStyle: {
              normal: {
                color: "#031525", //地图背景色
                borderColor: "rgba(100,149,237,1)", //省市边界线
              },
              emphasis: {
                color: "rgba(37, 43, 61, .5)", //悬浮背景
              },
            },
          },
          {
            map: "汕尾",
            label: {
              normal: {
                show: true,
                color: "#fff",
              },
              emphasis: {
                show: true,
              },
            },
            roam: true, //是否允许缩放
            layoutCenter: ["90%", "50%"], //地图位置
            layoutSize: "95%",
            itemStyle: {
              normal: {
                color: "#031525", //地图背景色
                borderColor: "rgba(100,149,237,1)", //省市边界线
              },
              emphasis: {
                color: "rgba(37, 43, 61, .5)", //悬浮背景
              },
            },
          },
        ],
        tooltip: {
          show: true,
          // formatter: "{a}{b}{c}{d}",
          formatter: function (e) {
            console.log(e);
            if (e.seriesType == "scatter") {
              return "1";
            } else {
              return e.name;
            }
            // var name = e.seriesName
          },
        },
        series: [
          {
            type: "map",
            map: "深圳",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: [],
          },
          {
            type: "map",
            map: "惠州",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: [],
          },
          {
            type: "map",
            map: "汕尾",
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077",
              },
              emphasis: {
                areaColor: "#2B91B7",
              },
            },
            animation: false,
            data: [],
          },
          {
            name: "害虫",
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            data: [
              {
                value: [114.06369, 22.543649, 3],
              },
              {
                value: [114.017696, 22.583165, 3],
              },
            ],
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#05C3F9",
              },
            },
          },
          {
            name: "害虫",
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 1,
            data: [
              {
                value: [114.424449, 23.118954, 30],
              },
              {
                value: [114.420425, 23.160959, 3],
              },
            ],
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#05C3F9",
              },
            },
          },
          {
            name: "害虫",
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 2,
            data: [
              {
                value: [115.368326, 22.792062, 3],
              },
              {
                value: [115.352228, 22.866141, 3],
              },
            ],
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "#05C3F9",
              },
            },
          },
        ],
      });
    },
    initpie() {
      var data = [
        { value: 8, name: "类型1" },
        { value: 5, name: "类型2" },
        { value: 6, name: "类型3" },
        { value: 2, name: "类型4" },
        { value: 4, name: "类型5" },
        { value: 5, name: "类型6" },
      ];
      var placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      };
      var data1 = [];
      var data2 = [];
      var colorIn = [
        "rgb(33, 166, 161)",
        "rgb(102,113,209)",
        "rgb(230,144,78)",
        "rgb(38,185,211)",
        "rgb(82,125,12)",
        "rgb(35,70,209)",
      ];
      var colorOut = [
        "rgba(33, 166, 161, 0.5)",
        "rgba(102,113,209, 0.5)",
        "rgba(230,144,78, 0.5)",
        "rgba(38,185,211, 0.5)",
        "rgb(82,125,12,0.5)",
        "rgb(35,70,209,0.5)",
      ];
      for (var i = 0; i < data.length; i++) {
        data1.push({
          data: data[i].value,
          value: data[i].value,
          name: data[i].name,
          itemStyle: {
            normal: {
              color: colorOut[i],
            },
          },
        });
        data2.push({
          data: data[i].value,
          value: data[i].value,
          name: data[i].name,
          itemStyle: {
            normal: {
              color: colorIn[i],
            },
          },
        });
      }
      var dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#2ac9e1",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)",
              },
            },
          });
        }
      }
      var option = {
        backgroundColor: "#04243E",
        tooltip: {
          title: "详情",
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },

        series: [
          {
            type: "pie",
            zlevel: 3,
            silent: true,
            // center: ['50%', '40%'],
            radius: ["43%", "45%"],
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: dataArr,
          },
          {
            name: "详情",
            type: "pie",
            selectedMode: "single",
            radius: [0, "40%"],
            label: {
              formatter: "{d}%",
              position: "inner",
            },
            data: data2,
          },
          {
            name: "详情",
            type: "pie",
            radius: ["48%", "50%"],
            labelLine: {
              normal: {
                length: 10,
                length2: 14,
              },
            },
            label: {
              show: true,
              position: "outer",
              alignTo: "labelLine",
              // ·圆点
              backgroundColor: "auto",
              height: 0,
              width: 0,
              lineHeight: 0,
              distanceToLabelLine: 0,
              borderRadius: 2.5,
              padding: [2.5, -2.5, 2.5, -2.5],
              formatter: "{a|{b}：}{b|{c}}",
              rich: {
                a: {
                  padding: [0, 0, 0, 10],
                  color: "#aebfe8",
                },
                b: {
                  padding: [0, 10, 0, 0],
                },
              },
            },

            data: data1,
          },
        ],
      };
      echarts.init(document.getElementById("mychartpie")).setOption(option);
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(() => {
      this.init();
    }, 500);
    this.initpie();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.pestbox {
  width: 100%;
  height: 100%;
  position: relative;
  .piebox {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    height: 100%;
    .iconbox {
      width: 30px;
      height: 50px;
      background-color: chocolate;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-size: 25px;
    }
    .piedatabox {
      width: 500px;
      height: 100%;
      background-color: darkblue;
    }
  }
}
</style>