Echarts 地图中地点轮播

今天做了个上海地图，要求自动轮播每一个区，本来以为会很难搞，但是去网上看了看，复制粘贴就搞定了，以此记录下，方便以后查找。

第一步：我们在页面中引入echarts和所需的依赖

import echarts from "echarts";
import "echarts/map/js/province/shanghai.js";

第二步：我们要准备一个有宽高的dom

<div class="visual_chart" id="main1"></div>

第三步：在methods里面写方法，把配置项等具体内容放在方法里，当然要在mounted里面挂在你写的方法。

//mounted里面挂载
this.initLeft1();

//method里面的方法，方法名可以自定义，与mounted里面挂载的保持一致即可
initLeft1() {
      var myChart1 = echarts.init(document.getElementById("main1"));
      var data = [
        { name: "崇明区", value: 10 },
        { name: "宝山区", value: 20 },
        { name: "嘉定区", value: 30 },
        { name: "青浦区", value: 40 },
        { name: "杨浦区", value: 50 },
        { name: "虹口区", value: 60 },
        { name: "闸北区", value: 70 },
        { name: "普陀区", value: 80 },
        { name: "静安区", value: 90 },
        { name: "黄浦区", value: 70 },
        { name: "卢湾区", value: 66 },
        { name: "长宁区", value: 55 },
        { name: "徐汇区", value: 44 },
        { name: "浦东新区", value: 77 },
        { name: "松江区", value: 33 },
        { name: "闵行区", value: 63 },
        { name: "金山区", value: 83 },
        { name: "奉贤区", value: 63 },
        { name: "南汇区", value: 85 },
      ];
      var option1 = {
        tooltip: {
          padding: 0,
          backgroundColor: "#6B99FF",
          padding: 10,
          textStyle: {
            color: "#fff",
            lineHeight: "18px",
          },
          formatter: (params) => {
            return params.name + "<br/>" + "活动次数：" + params.value + "次";
          },
        },
        legend: {
          show: false,
          orient: "vertical",
          x: "right",
          data: ["数据名称"],
        },
        dataRange: {
          show: false,
          min: 0,
          max: 100,
          color: ["#0765fc", "#b2e7fa"],
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
        },
        series: [
          {
            name: "数据名称",
            type: "map",
            zoom: 1.25,
            mapType: "上海",
            selectedMode: "single",
            showLegendSymbol: false,
            itemStyle: {
              // normal: { label: { show: true } },
              emphasis: {
                label: { show: true, color: "#fff", position: "inside" },
              },
            },
            data: data,
          },
        ],
      };
      myChart1.setOption(option1);
      ...
      ...
      ...
      ==以上为常规地图==
      ==以下为自动轮播的方法==
      ...
      ...
       ...
      var hourIndex = 0;
      var fhourTime = null;
      fhourTime = setInterval(function () {
        myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: hourIndex,
        });
        myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: hourIndex,
        });
        hourIndex++;
        if (hourIndex > data.length) {
          hourIndex = 0;
        }
      }, 3000);
      //鼠标移入停止轮播
      myChart1.on("mousemove", function (e) {
        clearInterval(fhourTime);
        myChart1.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart1.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        myChart1.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      });
      //鼠标移出恢复轮播
      myChart1.on("mouseout", function () {
        fhourTime = setInterval(function () {
          myChart1.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart1.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: hourIndex,
          });
          myChart1.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: hourIndex,
          });
          hourIndex++;
          if (hourIndex > data.length) {
            hourIndex = 0;
          }
        }, 3000);
      });
    },

希望能对大家有所帮助。