Echarts地图添加引导线效果(labelLine)

最近有粉丝问我能不能出个案例：地图上的地区文字，或其他标示类的图层，因为区块面积相对太小，想放在地图之外，通过labelLine连接到对应的区块上。今天就分享一个类似简单的案例，铺设散点形式铺设label，部分地区用线连接，地图以广州地图为例：

如果需要地图geojson或js文件的话，可以到我的个人 github 上自取：https://github.com/zhangqian00/echarts3-mapFile

1、初始化地图：

2、

声明label数据：

配置需要铺设的label，value值为坐标点，注释的四个区，需要用连线连接到地图外面，在后面会有单独配置，所以在此label数据里就不必需要了。

3、配置图层：

将labelData按散点类型，按value对应的坐标铺设到对应的位置上。

4、配置使用引导线的label图层

此处是四个需要使用引导线的区域label配置，因为连线是两个点之间连线，所以data中的coords是两个点的开始点坐标和结束点坐标，具体解释可参考echarts官方配置文档。

5、最后，应用配置

本案例使用的echarts版本为3.x版本。

此案例目的只是启发，做到举一反三，并不是只能铺设个label文字，内容完全可以自定义，也可以是别的一些内容例如：

只是这些需要更多的配置而已（formatter），具体参考官方案例，和配置文档。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Java调用echarts提供的地图压缩方法来压缩地图

    由于默认情况下的 GeoJSON 文件太大,ECharts 提供了方法可以压缩地图. GeoJSON 介绍:http://geojson.org/ ECharts 提供了压缩算法,但是代码是 JavaScript 的,参考代码写个 Java 的也可以,但是通过 Java 提供的脚本引擎可以很方便的直接执行 JS. 本文压缩代码参考下面的项目: https://github.com/giscafer/mapshaper-plus 这里的算法也是来源于 ECharts 从该项目提取出压缩地图的 JS

  • 利用pyecharts实现地图可视化的例子

    pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echarts 生成的图可视化效果非常棒,pyecharts 是为了与 Python 进行对接,方便在 Python 中直接使用数据生成图. 今天我们就用pyecharts和jupyter notebook实现地图数据的可视化. pyecharts v0.3.2以后,pyecharts 将不再自带地图 js 文件.如用户需要用到地图图表,可自行安装对应的地图文件包. 下面介绍

  • echarts设置图例颜色和地图底色的方法实例

    前言 本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些style 2.地图数据的获取以及Series的加载和其他没有什么大的差异.地图数据都在map.js中,都可以自己看,也可以自己根据格式获取响应的数据. 这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题. 1.图例的颜色代码 refresh: function (newOption) { if (newO

  • echarts实现地图定时切换散点与多图表级联联动详解

    echarts实现地图定时切换散点与多图表级联联动详解

    1.  摘要 最近做项目遇到个统计相关需求,一个页面中大概四个或更多图形统计,百度地图.饼图.柱状图.线型图.百度地图上显示所有店面在全国各地大概位置,目前暂定每省一个,在地图上显示散点.如默认显示郑州散点闪动,其他图形显示郑州相关数据:5秒切换下一个区域点,其他的图表数据对应改变.先上个图,各位有需要的可以再接着往下 2.  引入ECharts以及地图相关json ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器.因此引入方式简单了很多,只需要像普

  • Vue Echarts实现可视化世界地图代码实例

    Vue Echarts实现可视化世界地图代码实例

    Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js

  • echarts3 使用总结（绘制各种图表,地图）

    echarts3 使用总结（绘制各种图表,地图）

    由于项目需要自学了echarts,下面将学到的东西总结如下,如果有哪里写的不好,请批评指正 一.前期准备 1.使用echarts之前先要引入echarts.js,js可以到官网下载 2.写一个div容器用来装echarts内容,这个容器必须有高度,不然看不到内容. 3.在script中获取div容器的id,根据需要写option中的参数(也许你现在还不知道option是干嘛用的,不要着急往下看),使用setoption生成图表. (代码如下)注:后面将不再对引入js,获取id,调用option生

  • ECharts地图绘制和钻取简易接口详解

    ECharts地图绘制和钻取简易接口详解

    1.地图绘制过程原理 给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础.也就是说,你可以绘制任意形状的地图版块. 2.地图数据生成 中国以及省市县等地图的基础数据可以从这里生成与下载. http://datav.aliyun.com/tools/atlas 有了地图范围数据,在 echarts 中通过 registerMap 给这块注册个名字,即可为后续绘制使用,以下代码以最简形式绘制一幅中国地图. $.getJSON('https://geo.datav.aliyun.com/are

  • vue cli3.0结合echarts3.0与地图的使用方法示例

    vue cli3.0结合echarts3.0与地图的使用方法示例

    前言 echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的一个小的echarts demo,我在使用npm的时候对比了echarts和vue-echarts两个依赖,最后决定使用echarts依赖包,因为它更接近原生,使用现实更小,如果对vue生命周期比较了解,那就更容易操作. 下面讲一下做出这样一个echarts图.话不多说了,来一起看看详细的介绍

  • Echarts地图添加引导线效果(labelLine)

    Echarts地图添加引导线效果(labelLine)

    最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上.今天就分享一个类似简单的案例,铺设散点形式铺设label,部分地区用线连接,地图以广州地图为例: 如果需要地图geojson或js文件的话,可以到我的个人 github 上自取:https://github.com/zhangqian00/echarts3-mapFile 1.初始化地图: 2. 声明label数据: 配置需要铺设的label,val

  • Vue+OpenLayer为地图添加风场效果

    Vue+OpenLayer为地图添加风场效果

    一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址 npm install ol-windy --save 然后我们需要一个数据来绘制风场,我在文件最后上传一下文件. 接下来很简单,就是下面的代码. <template> <div class="home"> <div id="map" ref="map"></div&

  • 一文教会你从零开始画echarts地图

    一文教会你从零开始画echarts地图

    目录 echarts地图制作 基础配置 数据渲染 嵌入文字 地图下钻 结合水印制作级联效果 visualMap 总结 echarts地图制作 离线地图下载地址https://datav.aliyun.com/tools/atlas/index.html echarts文档地址https://echarts.apache.org/zh/option.html 基于VUE编写,其他框架请自行转换,大同小异 基础配置 先让地图内容出来,npm安装步骤省略,请参考官方文档,创建的div必须设置宽度和高度

  • echarts地图设置背景图片及海岸线实例代码

    目录 1.地图设置背景图片 2.地图外部多层轮廓线 3.地图海岸线 4.地图中高亮显示有数据的城市 5.滚动高亮轮播 总结 1.地图设置背景图片 // data domImg: require('@/assets/images/largescreen/nation/map_bg.png'), // js 渲染地图之前 var domImg = document.createElement("img"); domImg.style.height = domImg.height = dom

  • 比例尺、缩略图、平移缩放之百度地图添加控件方法

    比例尺、缩略图、平移缩放之百度地图添加控件方法

    下面通过图文并茂的方式给大家详细介绍下比例尺.缩略图.平移缩放之百度地图添加控件方法. 地图控件概述 百度地图上负责与地图交互的UI元素称为控件.百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件. 地图API中提供的控件有: Control:控件的抽象基类,所有控件均继承此类的方法.属性.通过此类您可实现自定义控件. NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能.移动端提供缩放控件,默认位于地图右下

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示      源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方

  • vue-openlayers实现地图坐标弹框效果

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

  • 一篇文章搞定echarts地图轮播高亮

    一篇文章搞定echarts地图轮播高亮

    目录 前言 toDoList just do it 准备一个地图 保存实例备用 设置定时器轮播 加入鼠标事件 总结 前言 这两天忙着做公司的超级数据大屏,实在挤不出时间连续更文. 但是更文活动都坚持这么久了也不想停止更新,那我就分享一下在工作中经常用到的echarts地图轮播高亮吧. 技术栈用的是vue2.x 相信效果大家已经清楚了那我们就开干吧. toDoList 简单的准备一个地图 保存实例备用 设置定时器 设置鼠标移入移出事件 just do it 准备一个地图 首先准备一个简简单单的地图

  • Qt编写地图实现实时动态轨迹效果

    Qt编写地图实现实时动态轨迹效果

    目录 一.前言 二.功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 实时动态轨迹经历过很多个版本的迭代,此功能最初是一个客户定制的,主要是需要在地图上动态显示GPS的运动轨迹,有个应用场景就是一个带有监控的车子,实时在运动中,后台可以接收到经纬度信息,需要绘制对应的轨迹,相当于这些摄像机点位是动态移动的,这样就可以观测到摄像机的实时位置信息,双击摄像机还可以弹出画面实时预览,很直观. GPS运动轨迹这个功能,也需要用到js的知识,其实就是封装一个js函数,绘制对应的线条路径,这个轨迹

  • vue2项目中封装echarts地图的优雅方法

    vue2项目中封装echarts地图的优雅方法

    目录 前言 能学到的知识 效果图 注意 1.vue中echarts 5.x以下版本和5.x以上版本引入的区别 2.记得在vue.config.js中开启运行时编译功能 实现 数据准备 echarts地图模块封装 页面调用 接口数据处理 代码总览 代码 总结 参考资料 前言 以前写过 vue项目中封装echarts的比较优雅的方式,大屏可视化里面,除了数据图表很常用,显示省市地图区域也是很常用到的,这是姐妹篇. 区域地图选区域时,需要弹窗展示数据,样式是各种各样的,各种排列的数据.图文混搭.视频.

随机推荐