echarts区域地图，自动&高亮区域&信息

代码部分

获得区域的JSON数据的网址地图选择器

mapData的数据顺序要和JSON中排列的顺序一样，不然自动高亮的区域和tooltip会不一致

<template>
  <div class="line-wrapper">
    <div
      :id="'echartMapPieChart'+this.$attrs.index"
      :style="{width:component.width+'px',height:component.height+'px'}"
    ></div>
  </div>
</template>
<script>
// import areaJson from "./../../../assets/zhejiang.json";
export default {
  name: "EchartMap",
  props: {
    option: Object,
    component: Object,
  },
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    // this.echartsInit();
    // console.log(areaJson);
    var time = this.$attrs.time;
    this.requestData();
    const that = this;
    if (time) {
      setInterval(
        function () {
          that.requestData();
        }.bind(that),
        time
      );
    }
  },
  methods: {
    requestData() {
      var url = this.$attrs.url;
      var tag = this.$attrs.data.tag;
      this.screenId = this.$attrs.data.screenId;
      this.$request
        .post(url, {
          screenId: this.screenId,
          tag,
        })
        .then((res) => {
          const { areaJson, mapDate } = res.data.data;
          // console.log("客源分析", areaJson, mapDate);
          this.echartsInit(areaJson, mapDate);
        });
    },
    echartsInit(areaJson, mapDate) {
    //忽略这些this.option里的属性
      const {
        areaColor,
        title,
        titleY,
        titleX,
        titleSize,
        citySize,
        tooltipSize,
        areaShadowColor,
        areaBorderColor,
        areaHighColor,
        legendRight,
        legendBottom,
        unit,
        rate,
      } = this.option;
      const that = this;
      const echarts = require("echarts");
      const myChart = echarts.init(
        document.getElementById(`echartMapPieChart${this.$attrs.index}`)
      );
      // var areaJson =
      //   "https://geo.datav.aliyun.com/areas_v2/bound/330000_full.json";

      // var areaJson = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";
      myChart.showLoading();
      let index = -1;
      that.timer = setInterval(function () {
        // 隐藏提示框
        // myChart.dispatchAction({
        //   type: 'hideTip',
        //   seriesIndex: 0,
        //   dataIndex: index
        // });
        // 显示提示框
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: index + 1,
        });
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });
        // 高亮指定的数据图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index + 1,
        });
        index++;
        if (index > 13) {
          index = -1;
        }
      }, 2000);
      myChart.on("click", function (e) {
        clearInterval(that.timer);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: e.dataIndex,
        });
      });
      myChart.on("mousemove", function (e) {
        clearInterval(that.timer);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 1,
          dataIndex: e.dataIndex,
        });
      }); //---------------------------------------------鼠标移入静止播放
      myChart.on("mouseout", function (e) {
        clearInterval(that.timer);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        }); //鼠标移出后先把上次的高亮取消
        that.timer = setInterval(function () {
          // 隐藏提示框
          myChart.dispatchAction({
            type: "hideTip",
            seriesIndex: 0,
            dataIndex: index,
          });
          // 显示提示框
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 1,
            dataIndex: index + 1,
          });
          // 取消高亮指定的数据图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: index,
          });
          // 高亮指定的数据图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: index + 1,
          });
          index++;
          if (index > 13) {
            index = -1;
          }
        }, 2000);
      });
      // $.getJSON(areaJson, function (geoJson) {
      echarts.registerMap("zhejiang", areaJson);
      myChart.hideLoading();
      // var mapDate = [
      //   {
      //     name: "杭州",
      //     value: [120.153576, 30.287459, 399],
      //   },
      //   {
      //     name: "宁波",
      //     value: [121.549792, 29.868388, 299],
      //   },
      //   {
      //     name: "温州",
      //     value: [120.672111, 28.000575, 299],
      //   },
      //   {
      //     name: "嘉兴",
      //     value: [120.750865, 30.762653, 299],
      //   },
      //   {
      //     name: "湖州",
      //     value: [120.102398, 30.867198, 299],
      //   },
      //   {
      //     name: "绍兴",
      //     value: [120.582112, 29.997117, 299],
      //   },
      //   {
      //     name: "金华",
      //     value: [119.649506, 29.089524, 420],
      //   },
      //   {
      //     name: "衢州",
      //     value: [118.87263, 28.941708, 300],
      //   },
      //   {
      //     name: "舟山",
      //     value: [122.106863, 30.016028, 23],
      //   },
      //   {
      //     name: "丽水",
      //     value: [119.921786, 28.451993, 299],
      //   },
      //   {
      //     name: "台州",
      //     value: [121.428599, 28.661378, 299],
      //   },
      // ];

      const option = {
        // backgroundColor: "#020933",
        title: {
          text: title,
          subtext: "",
          left: titleX,
          top: titleY,
          textStyle: {
            color: "#fff",
            fontSize: titleSize,
          },
        },

        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // console.log(params);
            return params.name + " : " + params.value[2] + unit;
          },
          // backgroundColor: "#fff",
          textStyle: {
            fontSize: tooltipSize,
          },
        },
        visualMap: {
          // min: 0,
          // max: 1000,
          right: legendRight,
          seriesIndex: 1,
          type: "piecewise",
          bottom: legendBottom,
          textStyle: {
            color: "#FFFF",
          },
          splitList: [
            {
              gte: 401,
              lte: 500,
              color: "#FF7500",
              label: "401~500",
            }, //大于5万人
            {
              gte: 301,
              lte: 400,
              color: "#FF7500",
              label: "301~400",
            }, //3-5万人
            {
              gte: 201,
              lte: 300,
              color: "#FFC273",
              label: "201~300",
            }, //1-3万人
            {
              lte: 200,
              gte: 101,
              color: "#FFDFB0",
              label: "101~200",
            },
            {
              lte: 100,
              color: "#FFFED0",
              label: "0~100",
            },
          ],
        },

        geo: {
          map: "zhejiang",
          aspectScale: 0.75, //长宽比
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: areaColor,
              shadowColor: areaShadowColor,
              shadowOffsetX: 0,
              shadowOffsetY: 25,
            },
            emphasis: {
              areaColor: areaHighColor, //"#2AB8FF"
              borderWidth: 0,
              color: "green",
              label: {
                show: false,
              },
            },
          },
        },
        series: [
          {
            type: "map",
            // roam: true,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: citySize,
                },
              },
              emphasis: {
                textStyle: {
                  color: "#fff",
                },
              },
            },

            itemStyle: {
              normal: {
                borderColor: areaBorderColor,
                borderWidth: 1.5,
                areaColor: areaColor,
              },
              emphasis: {
                areaColor: areaHighColor,
                borderWidth: 0,
                color: "green",
              },
            },
            zoom: 1.1,
            roam: false,
            map: "zhejiang", //使用
            // data: this.difficultData //热力图数据   不同区域 不同的底色
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            rippleEffect: {
              period: 15,
              scale: 5,
              brushType: "fill",
            },
            symbolSize: function (value) {
              // console.log(value[2]);
              let num = value[2];
              let size = num / rate;
              return size;
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#ffff",
                // shadowBlur: 10,
                // shadowColor: "#333",
              },
            },
            data: mapDate,
          },
        ],
      };
      myChart.setOption(option);
      // });

      // myChart.setOption(option);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
    this.timer = null;
  },
};
</script>
<style lang="scss" scoped>
.line-wrapper {
  margin: 0 auto;
}
</style>