echarts地图

<template>
  <div class="news_content">
    
    <div id="main" style="width: 100%; height: 100%"></div>
    
  </div>
</template>
<script>
//引入echarts与地图json文件
import * as echarts from "echarts"; // echarts@v5.2.2
import china from "../../assets/echartsData/china.json";//中国地图
import scatter from "../../assets/echartsData/scatter.json";//经纬度坐标
export default {
  data() {
    return {
//散点图数据
      echartsData: null,
    };
  },
  methods: {
//散点图数据处理
    handleData() {
      const data1 = scatter.data;
      console.log(data1);
      let array1 = [];
      let object1 = { name: "", value: [] };
      data1.forEach((item) => {
        object1.name = "1";
        object1.value[0] = item.staLon;
        object1.value[1] = item.staLat;
        array1.push(object1);
        object1 = { name: "", value: [] };
      });
      this.echartsData = array1;
      this.$nextTick(() => {
//调用渲染方法
        this.drawLine();
      });
    },
    drawLine() {
      let data3 = this.echartsData;
      let chart = echarts.init(document.getElementById("main"));
      echarts.registerMap("中国", china);
      //获取经纬度
      let jinweidu = [];
      let option = {
        geo: [
//底层地图纯属为了好看
          {
            map: "中国",
            zlevel: -1,
            top: "11%",
            itemStyle: {
              areaColor: "#06050a",
              borderColor: "#06050a",
              borderWidth: 10,
              shadowColor: "rgba(0,119,207,0.75)",
              shadowOffsetY: 1,
              shadowOffsetY: 1,
              shadowBlur: 5,
            },
          },
//正面地图
          {
            show: true,
            map: "中国",
            zlevel: 0,
            label: {
              show: true,
              color: "#fff",
              fontSize: 10,
            },
            itemStyle: {
              areaColor: "#011C33",
              borderColor: "#007480",
              borderWidth: 1,
            },
            emphasis: {
              areaColor: "#108dc7",
              borderColor: "#108dc7",
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
        ],
//echarts自定义弹出框
         tooltip: {
           show: true,
           triggerOn: "click",
           formatter: (params) => {
             let jingdu = Number(jinweidu[0]).toFixed(2);
             let weidu = Number(jinweidu[1]).toFixed(2);
             return `
                  <table>
                    <tbody>
                         <tr>
                            <td>经度：</td>
                            <td>${jingdu}</td>
                         </tr>
                         <tr>
                             <td>纬度：</td>
                            <td>${weidu}</td>
                         </tr>
                     </tbody>
                 </table>
                  `;
          },
         },
         series: [
           //经纬度示例 散点图
           {
            name: "图",
             type: "scatter",
            coordinateSystem: "geo",
             data: data3,
             symbol: "triangle",
             symbolSize: 12,
             hoverSymbolSize: 15,
             encode: {
               value: 2,
             },
             label: {
               formatter: "{b}",
               position: "right",
               show: false,
             },
             itemStyle: {
               color: "yellow",
             },
            emphasis: {
               label: {
                 show: true,
               },
             },
          },
         ],
      };
      window.addEventListener("resize", function () {
        chart.resize();
      });

      //点击地图获取经纬度
      chart.on("mousemove", function (params) {
        jinweidu = chart.convertFromPixel("geo", [
          params.event.offsetX,
          params.event.offsetY,
        ]);
      });
      chart.setOption(option);
    },
  },
  mounted() {
    this.handleData();
  },
};
</script>