<template>
  <div class="museum-map">
    <div class="list">
      <ul class="vertical-text">
        <li v-for="(item, index) in test" :key="index" class="blue">
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="map" ref="map"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import guizhou from "@/utils/common-data/guizhou.json";

export default {
  name: "MuseumMap",
  data() {
    return {
      test: ["测试测试测试", "测试测试测试", "测试测试测试"],
    };
  },
  mounted() {
    this.init();
    this.initAnimate();
  },
  methods: {
    init() {
      echarts.registerMap("guizhou", guizhou);
      let myChart = echarts.init(this.$refs.map);
      let option = {
        visualMap: {
          show: false,
          left: "right",
          min: 500000,
          max: 38000000,
          inRange: {
            color: ["#E3F1FC", "#B4E3FA", "#62C5F6", "#2998E8"],
          },
          text: ["High", "Low"],
          calculable: true,
        },
        series: [
          {
            name: "guizhou",
            type: "map",
            roam: true,
            map: "guizhou", //这里是你导入echarts的json文件
            layoutCenter: ["50%", "70%"],
            layoutSize: "100%",
            label: {
              //地图默认的文本属性
              show: false,
              color: "#2998E8",
            },
            select: {
              //选中的区域文本属性
              label: {
                color: "#2998E8",
              },
              itemStyle: {
                color: "#3066ba",
              },
            },
            emphasis: {
              //高亮的区域文本属性
              itemStyle: {
                areaColor: "#3066ba",
              },
              label: {
                show: true,
                textStyle: {
                  color: "#2998E8",
                },
              },
            },

            zoom: 1.2,
            textFixed: {
              Alaska: [20, -20],
            },
            data: guizhou.features.map((e) => {
              let num = Math.round(Math.random() * Math.random() * 100000000);
              return { name: e.properties.name, value: num };
            }),
          },
        ],
      };
      myChart.setOption(option);

      myChart.on("click", function (params) {
        console.log("点击位置", params.data);
      });
    },

    initAnimate() {
      var anime = require("animejs/lib/anime");
      anime({
        targets: ".blue",
        translateX: 270,
        delay: anime.stagger(100), // 每个元素的延迟增加100毫秒。
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.museum-map {
  height: 100%;
  width: 100%;
  display: flex;

  .map {
    width: 100%;
    height: 100%;
  }
}
.vertical-text {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
</style>