maps.vue

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

<script>
// import "echarts/map/js/china";
import echarts from 'echarts'
import { chinaJson } from "@/map/china";
echarts.registerMap("china", chinaJson);
export default {
  name: "maps",
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.$https({
        method: "post",
        url: "tBoardStatistic/getBoardProvincePlayTotalList",
        authType: this.backToken,
      })
        .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,
            right: 20,
            bottom: 20,
            itemWidth: 16,
            itemHeight: "200px",
            orient: "horizontal",
            text: ["由高到低", "播放量"],
            backgroundColor: "rgba(0,28,66,0.6)",
            padding: [15, 10],
            textStyle: {
              color: "rgba(255,255,255,1)",
            },
            inRange: {
              color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
            },
          },
        ],
        geo: {
          map: "china",
          roam: !1,
          scaleLimit: {
            min: 1,
            max: 2,
          },

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

          zoom: 1,
          top: 100,
          left: "10%",
          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="less">
#mapDiv {
  width: 100%;
  height: 100%;
}
</style>