echarts中国地图 飞线 热力

<template>
  <div style="width: 100%; height: 100%; padding: 5px 10px">
    <div id="map" style="width: 788px; height: 700px"></div>
  </div>
</template>

<script>
import axios from "axios";
import china from "../../utils/china.json";
export default {
  props: [],
  data() {
    return {
      hotData: [],
      fromData: [],
    };
  },
  methods: {
    getStatisticsClientType() {
      let that = this;
      axios
        .post(
          "https://avamayun.xingbiaoyi.com/overviewScreen/statisticsRegionScanCode"
        )
        .then(function (res) {
          that.hotData = [
            {
              log: 121.07299,
              scanCount: 1526,
              region: "南通市",
              lat: 32.06764,
            },
            {
              log: 120.642654,
              scanCount: 1167,
              region: "上海市",
              lat: 24.490033,
            },
            {
              log: 118.85578,
              scanCount: 26,
              region: "红河哈尼族彝族自治州",
              lat: 31.79811,
            },
            {
              log: 113.33685,
              scanCount: 23,
              region: "广州市",
              lat: 23.13491,
            },
            {
              log: 103.83845,
              scanCount: 16,
              region: "兰州市",
              lat: 36.0766,
            },
            {
              log: 113.06644,
              scanCount: 7,
              region: "长沙市",
              lat: 28.25761,
            },
          ];
          //  that.hotData = res.data
           that.hotData.map((i) => {
            i.name = i.region;
            i.value = [i.log, i.lat, i.scanCount];
            // i.visualMap = false;
          });
         
          that.initChart();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getInfo() {
      let that = this;
      axios
        .post(
          "https://avamayun.xingbiaoyi.com/overviewScreen/scanCodeMigrationMap"
        )
        .then(function (res) {
          const arr = [];
          res.data.map((i) => {
            arr.push([
              {
                coord: i.from.split(","),
              },
              {
                coord: i.to.split(","),
              },
            ]);
          });
          that.fromData = arr;
          that.initChart();
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    initChart() {
      this.setOptions();
    },
    setOptions() {
      let myChart = echarts.init(document.getElementById("map"), "macarons");
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      echarts.registerMap("china", china);
      const option = {
        visualMap: {
          type: "continuous",
          min: 0,
          max: 12,
          splitNumber: 3,
          inRange: {
            color: ["#dec674", "#ffc20e"],
          },
          textStyle: {
            color: "#fff",
          },
          show: false,
        },
        geo: {
          map: "china",
          roam: true,
          center: [110.97, 35.71],
          layoutCenter: ["100%", "100%"],
          zoom: 1,
          // roam: true, //支持拖拽缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1, //缩放最小大小
            max: 6, //缩放最大大小
          },
          label: {
            normal: {
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 8,
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            areaColor: "rgba(0, 23, 58, 1)",
            borderColor: "rgba(85, 147, 193, 1)",
            borderWidth: 1,
            emphasis: {
              borderWidth: 1,
              borderColor: "rgba(60,233,255,1)",
              areaColor: "rgba(0, 23, 58, 1)",
            },
          },
        },
        // visualMap: {
        //   min: 0,
        //   max: 1,
        //   calculable: false,
        //   realtime: false,
        //   inRange: {
        //     color: [
        //       "#fcf16e",
        //       "#dec674",
        //       "#ffe600",
        //       "#ffd400",
        //       "#ffd400",
        //       "#ffc20e",
        //     ],
        //   },
        // },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "geo",
            data: this.hotData,
            color: [
              "#fcf16e",
              "#dec674",
              "#ffe600",
              "#ffd400",
              "#ffd400",
              "#ffc20e",
            ],
            // symbolSize: function (val) {
            //   return val[2] * 1;
            // },
            // itemStyle: {
            //   normal: {
            //     color: "#ddb926",
            //   },
            // },
          },
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "circle", //箭头图标
              symbolSize: 7, //图标大小
            },
            lineStyle: {
              normal: {
                color: "#FFB800",
                width: 0, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: 0.2, //尾迹线条曲直度
              },
            },
            data: this.fromData,
          },
        ],
      };
      myChart.setOption(option);
    },

   
  },
  created() {
    this.getInfo();
    this.getStatisticsClientType();
  },
};
</script>

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