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>
### ECharts 地图使用教程与示例 #### 1. 准备工作 在使用 ECharts 绘制地图之前,需要引入必要的库文件并加载对应的地图数据。通常情况下,可以通过 `registerMap` 方法来注册自定义地图数据[^1]。 以下是完整的准备工作流程: - **引入 ECharts 库** 需要先通过 CDN 或本地方式引入 ECharts 的核心库以及扩展的地图模块。 - **获取地图 JSON 数据** 可以从官方资源或其他第三方平台下载目标区域的地图 GeoJSON 文件。 #### 2. 使用 `registerMap` 注册地图 `registerMap` 是用来向 ECharts 中注册地图的关键方法。它接受两个参数:第一个是地图名称字符串;第二个是一个包含路径和形状信息的对象数组。下面展示如何调用此函数完成地图初始化操作: ```javascript // 假设已存在名为 'china' 的中国地区 json 数据变量 chinaJsonData echarts.registerMap('China', chinaJsonData); ``` #### 3. 创建基于 series-map 类型图表实例 当成功注册好所需的地图之后,在配置项中的系列列表里添加一个新的条目指定其 type 属性值为 "map", 同时设置其他必要选项即可渲染出一张基础版的世界/国家/省份级别的地理分布图. ```javascript option = { title: { text: '中国人口密度分布图' }, tooltip: {}, visualMap: {}, // 添加视觉映射组件 series: [{ name: 'Population', type: 'map', mapType: 'China', // 设置刚才注册过的地图名作为 mapType 参数值 data:[], // 提供具体数值关联到各个行政区划单位上显示差异效果 label:{}, // 自定义标签样式 itemStyle:{} // 定义图形填充颜色渐变等外观属性 }] }; myChart.setOption(option); ``` #### 4. 调整 geo 组件增强交互体验 除了基本的地图呈现外,还可以利用 geo 组件进一步优化用户体验。比如开启鼠标悬停高亮功能、调整边界线粗细透明度等等。 ```javascript geo:{ roam:true, // 开启缩放和平移漫游模式 zoom:1.2, // 初始放大倍率 scaleLimit:{min:.8,max:5}, silent:false, emphasis:{} } ``` 以上就是有关于 ECharts 实现地图可视化的几个重要知识点介绍及其简单应用案例分享啦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值