【Echarts】echarts地图展示、自定义点位、地图及点位的点击事件

最新推荐文章于 2024-07-23 11:13:06 发布

浅笑＆回憶

最新推荐文章于 2024-07-23 11:13:06 发布

阅读量3.7k

点赞数 1

分类专栏： Echarts 前端问题文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_44903607/article/details/126835826

版权

本文介绍了如何使用Echarts在项目中展示地图，并进行自定义点位设置。通过阿里数据可视化平台获取所需区域的JSON文件，结合echarts、vue和axios等技术，实现地图功能。同时讲解了数据格式的要求以及地图和点位的点击事件处理。

摘要由CSDN通过智能技术生成

项目中用到地图，之前看到ecarts的地图功能觉得合适，先看看效果图：

在这里插入图片描述

1、首先在阿里数据可视化平台下载需要地区的JSON文件：数据可视化
2、下载安装echarts、vue、axios

数据格式（必须）

_this.mapData.push({
   
  // value: ele,
  id: ele.id,
  name: ele.name,
  signboardName: ele.signboardName ?? ele.name,
  lng: ele.longitude,
  lat: ele.latitude,
  connectStatus: ele.connectStatus,
  dataStatus: ele.dataStatus
})

自定义点位

addImage(url, params, api, realData) {
   
   return {
   
      type: "image",
      style: {
   
        image: url,
        x: api.coord([
          realData[params.dataIndex].lng,
          realData[params.dataIndex].lat,
        ])[0],
        y: api.coord([
          realData[params.dataIndex].lng,
          realData[params.dataIndex].lat,
        ])[1],
        width: 20,
        height: 25,
      },
    };