Echarts画区域飞线地图

罗兰Yolanda

墨衍会员 · AI 创作全网分发码龄14年

关注

VIP免费原创最新推荐文章于 2026-06-19 16:00:46 发布 6.1k 阅读 AI 写同款· GEO 优化 ›

echarts制作中国地图飞行线阅读详情

最近项目要求榆林市飞线图，地图上特定散点图加飞线效果，看效果：

1、echarts注册地图，如榆林市地图数据yls.json(https://geo.datav.aliyun.com/areas_v3/bound/610800_full.json)

<div id="chart-box" style="height: 100%; width: 100%"></div>

import echarts from "echarts/lib/echarts";
import yls_json from "./yls.json";

let data = yls_json;
this.$echarts.registerMap("yls", data);

2、配置echarts的option的geo,将注册的地图yls放在echarts的geo中。series里的type:scatter设置coordinateSystem: 'geo'；type: "lines",coordinateSystem: "geo",才能实现散点和飞线效果。

geo: {
        map: "yls",
        zoom: 1,
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12,
              color: "#43D0D6",
            },
          },
          emphasis: {
            show: true,
          },
        },
        itemStyle: {
          normal: {
            borderColor: "rgba(255,209,163, .5)", //区域边框颜色
            areaColor: "rgba(73,86,166,.1)", //区域颜色
            borderWidth: 0.5, //区域边框宽度
            shadowBlur: 5,
            shadowColor: "rgba(107,91,237,.7)",
          },
          emphasis: {
            borderColor: "#FFD1A3",
            areaColor: "rgba(102,105,240,.3)",
            borderWidth: 1,
            shadowBlur: 5,
            shadowColor: "rgba(135,138,255,.5)",
          },
        },
      },

series: [
        {
          name: "地点",
          type: "effectScatter",

最低0.47元/天解锁文章

标签

#echarts #javascript #前端

echarts中国地图飞线图demo 因为公司要做大屏，需要用到echarts的地图功能，并且要添加飞线功能，在网上查了下资料，翻阅了一下官方文档后，终于是实现出来了直接上代码 <template> <div class="container" id="container" style="z-index: 1"></div> </template> <scprit> import '' export detault { data:{}, mounted 阅读详情

Echarts画区域飞线地图

相关推荐