[游戏开发]echarts地图下钻&飞线

<script>
import { getXheliJLChart } from "@/api/index.js";

export default {
  data() {
    return {
      mapData: [],
      //流入飞线
      inline: [],
      // dom
      chart: null,
      // 初始place
      place: "浙江省",
      // 流入起始点
      inStartPoint: {
        //  大 右/大 上
        浙江省: [118.552791, 31.267446],
        杭州市: [118.852791, 30.867446],
        湖州市: [119.452791, 31.267446],
        嘉兴市: [120.482791, 31.067446],
        绍兴市: [120.132791, 30.327446],
        舟山市: [121.652791, 30.867446],
        宁波市: [120.902791, 30.567446],
        温州市: [119.852791, 28.667446],
        丽水市: [118.852791, 28.967446],
        台州市: [120.552791, 29.367446],
        衢州市: [118.152791, 29.567446],
        金华市: [119.552791, 29.767446],
      },
    };
  },
  created() {
    // 调用接口 初始化市级echarts
    this.init();
  },
  mounted() {},
  methods: {
    /**
     * 获取区域数据
     */
    init() {
      getXheliJLChart({
        year: 2022,
        industry: "产业",
        address: this.place,
      }).then((res) => {
        this.mapData = res.regionDetailList;
        // 处理接口数据 按格式返回
        this.mapData = this.mapData.map((item, index) => {
          return {
            name: item.regionName,
            value: item.needPeopleMagnification,
          };
        });
        if (this.chart) {
          // 点击区下钻 设置option
          this.setMapOption();
        } else {
          // 第一次进入时执行 初始化地图
          this.initMap();
        }
      });
    },
    /**
     * 初始化地图和事件
     */
    initMap() {
      let that = this;
      // 获取dom元素
      this.chart = this.$echarts.init(document.getElementById("map"));
      // 点击空白处返回省级地图
      this.chart.getZr().on("click", function (params) {
        if (!params.target) {
          if (that.place !== "浙江省") {
            that.place = "浙江省";
            that.init("浙江省");
          }
        }
      });
      // 区地图
      this.chart.on("click", function (params) {
        console.log(params.name);
        // 子传父
        that.$emit("place", params.name);
        if (that.place === "浙江省") {
          that.place = params.name;
          // 调用区数据接口
          that.init();
        }
      });
      this.setMapOption();
    },
    /**
     * 设置地图option
     */
    setMapOption() {
    // 清空
      this.chart.clear();
      let hz, hz_bg;
      if (this.place === "浙江省") {
        // 引用省地图json数据
        hz = require("../../../../static/china_province/330000_full.json");
        hz_bg = require("../../../../static/china_province/330000.json");
      } else {
        // 引用区地图json数据
        hz = require(`../../../../static/zhejiang/${this.place}.json`);
        hz_bg = require(`../../../../static/zhejiang/bg/${this.place}.json`);
      }
      // 获取区中心点
      let arr = [];
      hz.features.forEach((element, index) => {
        arr.push([this.inStartPoint[this.place], element.properties.center]);
      });
      this.inline = arr;
      // 注册地图
      this.$echarts.registerMap("hz", hz);
      this.$echarts.registerMap("hz_bg", hz_bg);
      this.option = {
        // 鼠标移入悬浮
        tooltip: {
          show: false,
          formatter: "{b}:{c}",
        },
        geo: [
          // 内部区背景色
          {
            geoIndex: 1,
            map: "hz_bg",
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 0.2,
                y: 0,
                x2: 1,
                y2: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 162, 247, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 36, 109, 1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderWidth: 2,
              borderColor: "rgba(255,174,59,0.6)",
            },
            emphasis: {
              disabled: true,
            },
            tooltip: {
              show: false,
            },
          },
          // 边框背景色
          {
            map: "hz",
            show: true,
            itemStyle: {
              areaColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
              shadowColor: "#00002A", // 外边框阴影色
              shadowBlur: 10000, //外边框阴影
              opacity: 1,
              borderWidth: 1,
              borderColor: "rgba(255,174,59,0.6)",
            },
          },
        ],
        series: [
          {
            type: "map",
            mapType: "hz",
            label: {
              show: true,
              formatter: "{c}\n {b}",
              color: "#fff",
            },
            itemStyle: {
              normal: {
                areaColor: "rgba(0,0,0,0)",
                color: "rgba(0,0,0,0)",
              },
              emphasis: {
                show: false,
              },
            },
            //数据评分value
            // 地图内部数据 name value
            data: this.mapData,
            // 名称映射
            nameMap: {
              临安区: "临安市",
              奉化区: "奉化市",
              玉环市: "玉环县",
              龙港市: "龙岗市",
            },
          },
          {
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 15,
            // 图标
            effect: {
              show: true,
              // 速度
              period: 3,
              delay: function () {
                return Math.ceil(Math.random() * 1000);
              },
              // 箭头长度
              trailLength: 0.3,
              symbol: "arrow",
              color: "#fff791",
              symbolSize: 6,
            },
            lineStyle: {
              normal: {
                width: 1,
                opacity: 0.1,
                // 线的弧度
                curveness: 0.3,
                color: "#C2E9E7",
                // 虚线类型
                type: "solid",
              },
            },
            data: this.inline,
          },
        ], //各省地图颜色数据依赖value
      };
      this.chart.setOption(this.option);
    },
  },
};
</script>

《新程序员》：云原生和全面数字化实践

50位技术专家共同创作，文字、视频、音频交互阅读