echarts 地图添加引出线（使用经纬度画出飞线），label自定义图片

最新推荐文章于 2024-03-24 18:04:40 发布
最新推荐文章于 2024-03-24 18:04:40 发布
阅读量1.9k 收藏 11
点赞数
分类专栏： 实例 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TTianYe/article/details/128211515
版权

在这里插入图片描述
直接上源码

<template>
  <div class="bg">
    <div class="zindex">
      <div id="mapLine"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapJson } from "../../../../assets/js/map_js/gansu.js";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
  },
  methods: {
    getMap() {
      var dom = document.getElementById("mapLine");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = mapJson;

      myChart.showLoading();
      myChart.hideLoading();
      echarts.registerMap("gansu", geoJson);
      myChart.setOption(
        (option = {
          //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          geo: {
            z: 5,
            show: true,
            map: "gansu",
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: "80%", //地图大小
            // zoom: 0.65, //地图缩放比例
            roam: false,
            label: {
              // show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: 12,
              color: "#fff",
            },

            itemStyle: {
              //每一块区域的样式
              normal: {
                areaColor: "#00D3FD",
                borderColor: "#0F5A69",
                borderWidth: 1,
              },
              shadowColor: "rgba(5,79,94,0.9)",
              shadowBlur: 2,
              shadowOffsetX: -5,
              shadowOffsetY: 10,
            },
            // 鼠标经过样式--区域颜色、和提示
            emphasis: {
              label: {
                show: true,
                color: "#00D3FD",
                fontSize: "12",
              },
              itemStyle: {
                borderColor: "#0F5A69",
                borderWidth: 2,
                areaColor: "#DEF0F3",
              },
            },
            select: {
              disabled: true, //不能点击地图
            },
            // 对不同的区块进行着色
            regions: [
              {
                name: "兰州市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
              {
                name: "陇南市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
              {
                name: "白银市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
              {
                name: "金昌市",
                itemStyle: {
                  areaColor: "#00B346",
                },
              },
            ],
          },

          series: [
            // 地图的样式---主要是为了添加阴影
            {
              type: "map",
              map: "gansu",
              layoutCenter: ["50%", "50%"],
              layoutSize: "80%",
              roam: false,
              itemStyle: {
                normal: {
                  shadowColor: "rgba(5,79,94,0.9)",
                  shadowBlur: 2,
                  shadowOffsetX: -5,
                  shadowOffsetY: 10,
                },
              },
            },
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              // effect: {
              //   show: true,
              //   period: 2, //箭头指向速度，值越小速度越快
              //   trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
              //   symbol: "triangle", //箭头图标
              //   symbolSize: 5, //图标大小
              //   color: "#37F6E0", // 图标颜色
              // },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: true,
                  width: 2, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0", // 飞线颜色
                },
                color: "#37F6E0",
              },
              label: {
                show: true,
                position: "start",
                formatter: function (params) {
                  //文本提示框
                  return (
                    "\n\n{title|" + "兰州市" + "}\n{value|" + "1203万" + "}"
                  );
                },
                width: 100,
                height: 100,
                backgroundColor: {
                  image:
                    "https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
                },
                rich: {
                  //标题样式
                  title: {
                    height: 50,
                    width: 100,
                    align: "center",
                    lineHeight: 30,
                    fontSize: 14,
                    color: "#A7D4C6",
                  },
                  value: {
                    //内容样式
                    height: 50,
                    width: 100,
                    lineHeight: 30,
                    fontSize: 14,
                    color: "#00FFB5",
                    align: "center",
                  },
                },
              },
              data: [
                {
                  coords: [
                    [108, 40.8], // 起点
                    [104.173606, 36.54568], // 终点
                  ],
                },
              ],
            },
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              // effect: {
              //   show: true,
              //   period: 2, //箭头指向速度，值越小速度越快
              //   trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
              //   symbol: "triangle", //箭头图标
              //   symbolSize: 5, //图标大小
              //   color: "#37F6E0", // 图标颜色
              // },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: true,
                  width: 2, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0", // 飞线颜色
                },
                color: "#37F6E0",
              },
              label: {
                show: true,
                position: "start",
                formatter: function (params) {
                  //文本提示框
                  return "\n{title|" + "甘南" + "} \n{value|" + "1203万" + "}";
                },
                width: 80,
                height: 80,
                backgroundColor: {
                  image:
                    "https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
                },
                rich: {
                  //标题样式
                  title: {
                    height: 40,
                    width: 80,
                    align: "center",
                    lineHeight: 25,
                    fontSize: 14,
                    color: "#A7D4C6",
                  },
                  value: {
                    //内容样式
                    height: 40,
                    width: 80,
                    lineHeight: 25,
                    fontSize: 14,
                    align: "center",
                    color: "#00FFB5",
                  },
                },
              },
              data: [
                {
                  coords: [
                    [95.5, 35.5], // 起点
                    [103.173606, 34.54568], // 终点
                  ],
                },
              ],
            },
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              // effect: {
              //   show: true,
              //   period: 2, //箭头指向速度，值越小速度越快
              //   trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
              //   symbol: "triangle", //箭头图标
              //   symbolSize: 5, //图标大小
              //   color: "#37F6E0", // 图标颜色
              // },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: true,
                  width: 2, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0", // 飞线颜色
                },
                color: "#37F6E0",
              },
              label: {
                show: true,
                position: "start",
                formatter: function (params) {
                  //文本提示框
                  return (
                    "\n\n{title|" + "酒泉市" + "}\n{value|" + "1203万" + "}"
                  );
                },
                width: 100,
                height: 100,
                backgroundColor: {
                  image:
                    "https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
                },
                rich: {
                  //标题样式
                  title: {
                    height: 50,
                    width: 100,
                    align: "center",
                    lineHeight: 30,
                    fontSize: 14,
                    color: "#A7D4C6",
                  },
                  value: {
                    //内容样式
                    height: 50,
                    width: 100,
                    lineHeight: 30,
                    fontSize: 14,
                    color: "#00FFB5",
                    align: "center",
                  },
                },
              },
              data: [
                {
                  coords: [
                    [89, 40.5], // 起点
                    [95, 39.744023], // 终点  酒泉
                  ],
                },
              ],
            },
            // 线的样式
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              // effect: {
              //   show: true,
              //   period: 2, //箭头指向速度，值越小速度越快
              //   trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
              //   symbol: "triangle", //箭头图标
              //   symbolSize: 5, //图标大小
              //   color: "#37F6E0", // 图标颜色
              // },
              lineStyle: {
                normal: {
                  type: [3, 5],
                  dashOffset: 5,
                  show: true,
                  width: 2, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0, //尾迹线条曲直度
                  color: "#37F6E0", // 飞线颜色
                },
                color: "#37F6E0",
              },
              label: {
                show: true,
                position: "start",
                formatter: function (params) {
                  //文本提示框
                  return "\n{title|" + "陇南市" + "}\n{value|" + "1203万" + "}";
                },
                width: 80,
                height: 80,
                backgroundColor: {
                  image:
                    "https://scshop-api.yuanzhankeji.com/adminApi/image/2022126/30a7b691-bdd2-4b55-b98b-28283364d671.png",
                },
                rich: {
                  //标题样式
                  title: {
                    height: 40,
                    width: 80,
                    align: "center",
                    lineHeight: 25,
                    fontSize: 14,
                    color: "#A7D4C6",
                  },
                  value: {
                    //内容样式
                    height: 40,
                    width: 80,
                    lineHeight: 25,
                    fontSize: 14,
                    color: "#00FFB5",
                    align: "center",
                  },
                },
              },
              data: [
                {
                  coords: [
                    [108, 33.5], // 起点
                    [104.929379, 33.388598], // 终点
                  ],
                },
              ],
            },
          ],
        })
      );

      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
    },
  },
};
</script>

<style scoped>
#mapLine {
  width: 900px;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -450px;
  /* transform-origin: center bottom;
  transform: rotateX(55deg) translateZ(80px) ; */

}
.bg {
  width: 100%;
  height: 88vh;
  background-color: #000C14;
  /* background: url("../../../../assets/img/bj.png") no-repeat center; */
  /* background-size: 100% 100%; */
}
.zindex {
  width: 500px;
  height: 500px;
  /* background: url("../../../../assets/img/bg.png") no-repeat center; */
  /* background-size: 80% 80%; */
  margin: 0 auto;
  position: relative;
  /* transform-style: preserve-3d;
  perspective: 800px; */
}
</style>
陶甜也
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echars 地图添加引导线效果
qq_39889855的博客
04-25 2867
·引入地图数据、配置基础地图 await axios.get("../../../static/json/map/yantai.json", {}).then(yantaiJson => { //获取json数据 echarts.registerMap("yantai", yantaiJson.data); //生成地图 let jsondata = yantaiJson.data.featu...
echarts地图飞线实现
06-25
echarts地图展示、地图飞线，地图线行展示，大气、简洁、好看。
echarts地图：全球+全国+省级，可下钻层级
07-21
使用echarts来显示世界地图和全国地图，并且可以下钻层级 适用于使用echarts+vue3.0+vite的人员 解决全球下钻到全国到省级的问题 以及不要的地图资源
echarts世界地图闪烁点.rar
03-15
echarts地图的例子倒是挺多，世界地图的例子不多。这个echarts插件实现的世界地图带闪烁点特效。 echarts世界地图 地图闪烁 echarts图表 echarts热点地图 +echarts世界地图闪烁点（共6个文件） -world.json -index.html -echarts.min.js -world.js -world_new.js -世界地图中国坐标.txt
echarts 5.0——3d中国地图和飞线
最新发布
为技术而生
03-24 1131
echarts 5.0的版本样式语法与4.0及以下的语法有个别差异，使用旧语法浏览器会警告提示。3d地图常用的实现方法有两种。一种是使用GL来实现，一种是使用叠层和阴影来实现，本文将使用叠层和阴影来实现。
echarts 饼状图 调整位置
热门推荐
yinyueyu007的博客
09-01 2万+
通过调整 center 按照百分比调整位置 series: [{ name: '圆环图系列名称', // 系列名称 type: 'pie', // 系列类型 left: '0%', center: ['24%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ] radius: ['30%', '40%']
Echarts地图添加引导线效果(labelLine)
前端很忙
09-04 1万+
最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例： 如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echa...
echarts绘制地图及连线
bolanlaike的博客
01-10 2万+
最近用echarts画了很多图，写出来或许能帮助到大家 下图是最基本的一个地图加连线 本篇文章只写这个简单的，后续还有热力图，时间轴等   这里我只解析部分关键代码，完整代码见https://github.com/bolanlaike/echarts-map 这段代码主要是获取数据以及数据的组装 require([ 'echarts', ...
使用Echarts根据经纬度给地图画点画线
共勉
04-09 1万+
在使用Echar进行绘制地图对象，首先我们需要地图的json文件，Echarts依赖默认会引入这个相关的json文件，所以后续使用这个地图可以之间引用这里的json文件进行绘制Echarts地图。但是在后续重新构建项目的时候发现了一个问题，Echarts的依赖包下没有这个map文件了，我心想这不人麻了，这json文件我要去哪找。后面再对比版本之后发现，在5.0版本之前Echarts会默认将这些Map的json文件进行打包,但是在5.0之后就不会对这个进行打包加入到依赖之中了
echarts上加横线标线_Echarts地图添加引导线效果(labelLine)
weixin_39669769的博客
12-20 2027
最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例：如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echarts...
echarts——地图map加引导线、labelLine效果
yaocong1993的博客
05-23 1万+
echarts地图map有时因数据较密集，label会叠加在一起，只有饼图pie有labelLine引导线，如下两种方法可以实现地图map添加引导线。 实现效果如下，可以直接在echarts编辑器运行看效果https://www.echartsjs.com/gallery/editor.html。 方法一：引导线用lines实现 ，其它用scatter实现（也可以用map中的label实现...
Echarts地图+覆盖物提示框轮播效果
02-18
提示：springboot项目，下载之后需要运行该项目，然后才能访问看到效果。代码不多，谨慎下载。 主要功能：地图缩放拖动、区域点击往返市区地图、双击地图全屏放大、轮播带图片提示框 需要的快去下载吧！！！
ECharts 地图
04-03
ECharts 地图，几种样式的地图DEMO
echarts结合echarts-gl实现3D飞线地球可视化
08-05
echarts结合echarts-gl实现3D飞线地球可视化，这里提供一个简单案例的实现方式，访问页面需要通过类似vscode插件之Live Server等服务器的方式打开
百度地图集成echarts实现迁徙(航线)动画特效.rar
09-30
echarts实现迁徙(航线)动画效果，可与百度地图集成，也可单独使用echarts实现
高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
08-28
高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以 高德地图画线，单条多条带方向示例亲测有效，自己也在使用换成你的key就可以
饼图加引导线_echarts -- 饼图引导线的设置
weixin_39747577的博客
12-30 1762
seriesData: [{name:"进站乘客统计",type:"pie",radius: [0, 70],center: ["25%", "40%"],itemStyle: {normal: {label: {show:true,position:"outside",//color: "#ddd",formatter: function(params) {console.log("params...
漏刻有时数据可视化Echarts组件开发(39)：地图引导线效果的解决方案
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-01 188
【代码】漏刻有时数据可视化Echarts组件开发(39)：地图引导线效果的解决方案。
echarts地图飞线
03-29
ECharts地图飞线是指在ECharts地图上实现航线或运输路线的可视化效果。通过ECharts地图飞线，可以更直观地展示不同地区之间的运输或交通情况，同时增强地图的视觉效果。 实现ECharts地图飞线，需要使用ECharts提供的geo、map和lines系列。其中，geo系列用于绘制地图，map系列用于显示地图上的数据，而lines系列则用于绘制飞线。 具体实现步骤如下： 1. 在ECharts中引入地图数据，并设置地图样式。 2. 在map系列中设置数据，包括地区名称、经纬度、值等信息。 3. 在lines系列中设置数据，包括起点、终点、线条颜色等信息。 4. 在series中将map和lines系列组合起来，并设置相关属性，如线条宽度、透明度等。 5. 在option中设置动画效果，以实现飞线的效果。 6. 最后，通过ECharts提供的API实现其他交互效果，如鼠标悬停、点击等交互操作。 以上就是实现ECharts地图飞线的基本步骤。当然，具体的实现过程还需根据实际需求进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值