<template>
  <div id="mapDiv"></div>
</template>

<script>
import "echarts/map/js/china";
export default {
  name: "maps",
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$https({
        method: "post",
        url: "tBoardStatistic/getBoardProvincePlayTotalList"
      })
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              this.dataList = res.data.data;
            } else {
              this.dataList = [];
            }
          } else {
            this.dataList = [];
          }
          this.init();
        })
        .catch((err) => {
          this.$message.error(err.message);
          this.init();
        });
    },
    init() {
      let option = {
        tooltip: {
          triggerOn: "click",
          formatter: function (e, t, n) {
            return 0.5 == e.value
              ? e.name + "：播放量"
              : e.seriesName + "<br />" + e.name + "：" + e.value;
          },
        },
        visualMap: [
          {
            dimension: 0,
            left: "8%",
            bottom: 20,
            itemWidth: 16,
            orient: "horizontal",
            text: ["播放量", "由低到高"],
            backgroundColor: "rgba(0,19,45,0.4)",
            padding: 16,
            textStyle: {
              color: "gba(255,255,255,1)",
            },
            inRange: {
              color: [
                "rgba(161,255,255,1)",
                "rgba(91,214,255,1)",
                "rgba(38,157,255,1)",
                "rgba(0,72,149,1)",
              ],
            },
          },
        ],
        geo: {
          map: "china",
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2,
          },

          roam: true, //是否开启平游或缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1,
            max: 2,
          },

          zoom: 1.2,
          top: 51,
          label: {
            normal: {
              show: !0,
              fontSize: "12",
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                // 隐藏地图
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
          ],
        },
        series: [
          {
            name: "播放量",
            type: "map",
            geoIndex: 0,
            data:this.dataList,
          },
        ],
      };
      let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
      echartsDiv.setOption(option);
    },
  },
};
</script>

<style lang=scss>
#mapDiv {
  width: 100%;
  height: 100%;
}
</style>