echarts中国地图 飞线 散点 vue

<template>
  <div class="map">
    <div id="map" :style="{ height: height, width: width }"></div>
  </div>
</template>

initChart() {
      let myChart = echarts.init(document.getElementById("map"), "macarons");
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      console.log(myChart);
      echarts.registerMap("china", china);
      const points = [
        { name: "大同市", value: ["125.03", "46.58", "10"] },
        { name: "九江市", value: ["115.97", " 29.71", "2"] },
        { name: "海南省", value: ["116.821983", "34.929515", "5"] },
      ];
      const geoCoordMap = china.features;
      console.log(geoCoordMap);
      const convertData = function (data) {
        const res = [];
        for (let i = 0; i < data.length; i++) {
          let dataItem = data[i];
          let fromCoord, toCoord;
          geoCoordMap.map((g) => {
            if (dataItem[0].name == g["properties"]["name"]) {
              fromCoord = g["properties"]["centroid"];
            }
            if (dataItem[1].name == g["properties"]["name"]) {
              toCoord = g["properties"]["centroid"];
            }
            if (fromCoord && toCoord) {
              res.push([
                {
                  coord: fromCoord,
                },
                {
                  coord: toCoord,
                },
              ]);
            }
          });
        }
        return res;
      };
      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: 2,
          // roam: true, //支持拖拽缩放
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 1, //缩放最小大小
            max: 6, //缩放最大大小
          },
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 8,
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(15, 168, 255, 0.5)",
              areaColor: "['rgba(0,23,58,0.8)']", //设置地图背景色的颜色设置
              color: "rgba(0,23,58,0.8)", //刚才说的图例颜色设置
            },
            emphasis: {
              borderWidth: 1,
              borderColor: "rgba(0,3,58,0.8)",
              areaColor: "rgba(0,123,58,0.8)",
              label: {
                show: false,
                textStyle: {
                  color: "#fff",
                },
              },
            },
          },
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
        },
        series: [
          {
            name: "",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: points,
            symbolSize: function (val) {
              return val[2] * 5;
            },
            itemStyle: {
              normal: {
                color: "#ddb926",
              },
            },
          },
          {
            type: "lines",
            zlevel: 10,
            symbol: ["none", "arrow"],
            // effect: {
            //   show: true,
            //   period: 2,
            //   trailLength: 1,
            //   color: "rgb(204,102,51)",
            //   symbolSize: 1,
            //   symbol: "['pin','arrow']",
            //   loop: false,
            //   type:"dashed",
            // },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "rgb(204,102,51)",
                width: 1,
                curveness: 0.4,
              },
            },
            data: convertData([
              [{ name: "北京市" }, { name: "江苏省" }],
              [{ name: "浙江省" }, { name: "辽宁省" }],
              [{ name: "辽宁省" }, { name: "海南省" }],
            ]),
          },
        ],
      };
      console.log(324523, option);
      myChart.setOption(option);
      myChart.on("georoam", function (params) {
        var option = myChart.getOption(); //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
        } else {
          //捕捉到拖曳时
          option.geo[1].center = option.geo[0].center; //下层的geo的中心位置随着上层geo一起改变
        }
        myChart.setOption(option); //设置option
      });
    },