vue2 echart之地图

<!-- 地图 -->
<template>
  <div style="width: 80vw; height: 80vh">
    <v-echart ref="maps" :option="option1" autoresize @click="handleMaps" />
  </div>
</template>

<script>
import "./china.js";
export default {
  name: "index",
  components: {},
  props: {},
  data() {
    return {
      option1: {},
      dataList: [
        { name: "湖南", value: 3957 },
        { name: "北京", value: 2665 },
        { name: "上海", value: 1647 },
        { name: "江西", value: 79 },
        { name: "河南", value: 1592 },
        { name: "山西", value: 80 },
        { name: "四川", value: 1399 },
        { name: "湖北", value: 1194 },
        { name: "江苏", value: 1162 },
        { name: "内蒙古", value: 1152 },
        { name: "安徽", value: 354 },
        { name: "辽宁", value: 719 },
        { name: "广东", value: 1697 },
        { name: "浙江", value: 602 },
        { name: "济南", value: 535 },
        { name: "陕西", value: 516 },
        { name: "贵州", value: 470 },
        { name: "山东", value: 429 },
        { name: "云南", value: 429 },
        { name: "广西", value: 421 },
        { name: "吉林", value: 400 },
        { name: "南京", value: 353 },
        { name: "重庆", value: 337 },
        { name: "黑龙江", value: 282 },
        { name: "海南", value: 7 },
        { name: "新疆", value: 279 },
        { name: "福建", value: 213 },
        { name: "河北", value: 192 },
        { name: "天津", value: 166 },
        { name: "宁夏", value: 3 },
        { name: "甘肃", value: 8 },
        { name: "青海", value: 11 },
        { name: "西藏", value: 2 },
      ],
      times: "",
    };
  },
  created() {
    this.initMap();
  },
  mounted() {
    this.lineChartPlayTip();
  },
  methods: {
    handleMaps(event) {
      console.log("event------------------------>  ", event);
    },
    lineChartPlayTip() {
      let maps = this.$refs.maps;
      let mapsLength = this.option1.series[0].data.length;
      let index = 0;
      this.times = setInterval(() => {
        if (index >= mapsLength) {
          index = 0;
        }
        maps.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: index,
        });
        index++;
      }, 3000);
    },
    initMap() {
      this.option1 = {
        geo: {
          map: "china", // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true,
          },
          itemStyle: {},
        },
        series: [
          {
            name: "各区域人数",
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
            },
            data: this.dataList,
          },
        ],
        tooltip: {
          formatter(params) {
            return params.name + ": " + params.value;
          },
          // backgroundColor: "transparent", //提示标签背景颜色
          textStyle: {
            color: "#000",
          },
          itemStyle: {
            normal: {
              areaColor: "#f4e4d4", // 默认区域颜色
              borderColor: "#fff",
            },
            emphasis: {
              areaColor: "#ffcc00", // 鼠标悬停或点击时的颜色
            },
          },
        },
        // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
        visualMap: {
          show: false,
          // min: 0, // 最小值
          // max: 20000, // 最大值
          // text: ["20000", "0"],
          // realtime: false,
          // calculable: false,
          inRange: {
            color: ["#e0ffff", "#006edd"], // 设置区域颜色
          },
        },
      };
    },
  },
  beforeDestroy() {
    clearInterval(this.times);
  },

};
</script>

<style scoped lang="scss"></style>