Echarts显示自定义标注点/地图map引导线

先贴效果。这里实现了
1.地图上县区名的显示，鼠标移入显示相应的项目数（如下图东源县）
2.地图上增加自定义地图（这里增加了没有的高新区&市辖区&江东新区）
3.较小的地区，改用lableline延长线显示地名+项目数，优化显示结果

1.地图上自定义标注点配置在series数组中，{type: 'scatter'}，数据基本格式为：

[ {name: 'xx县', value: [纬度,经度]}]

2.地图上延长线标注点配置在series数组中，{type: 'lines'}，数据基本格式为：

[ {name: 'xx县', coords: [[起点纬度,起点经度],[终点纬度,终点经度]],value}]

// 地图上标注点数据
var mapItemCountArray1=[{name: '龙川县', value: [115.323481,24.39608,312]},//...
];//地图上显示延长线地区标注数据
var mapItemCountArray2=[{name: '高新区', coords:[[114.665941, 23.624965],[114.35941, 23.50720]],value: 23 },{name: '', coords:[[114.65941, 23.704965],[114.35941, 23.50720]],value: 23 },{name: '市辖区', coords:  [[114.706347, 23.800092],[114.300347, 23.680002]],value: 233},
];var heyuanMap= echarts.init(document.getElementById('map_box'))echarts.registerMap('heyuan', data); //data来源于地区json文件heyuanMap.setOption({legend:{},//地图地名显示配置geo: {map: 'heyuan', show: true,//配置地图上地区对应的项目数，初始不显示，移入显示label:{normal:{show: false},emphasis: {show: true,backgroundColor:{image: '../images/img_warning.jpg'},formatter: function (params) {return mapItemCountArray1.map(item=>{return item.name==params.name?item.value[2]+'个':''}).join("")},},},},series: [{type: 'map',//渲染地图coordinateSystem: 'geo',zoom: 1.2,},//地图上地名显示。type: 'scatter',{name: '',type: 'scatter',coordinateSystem: 'geo',data: mapItemCountArray1,//......}//地图上的延长线标注点。type:'lines',{type:'lines',data:mapItemCountArray2,//......},]})

Echarts显示自定义标注点/地图map引导线相关推荐

echarts上加横线标线_Echarts地图添加引导线效果(labelLine)
最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上.今天就分享一个类似简单的案例,铺设散点形式铺设lab ...
Echarts地图添加引导线效果(labelLine)
最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上.今天就分享一个类似简单的案例,铺设散点形式铺设lab ...
echars 地图添加引导线效果
·引入地图数据.配置基础地图 await axios.get("../../../static/json/map/yantai.json", {}).then(yantaiJson ...
ECharts 饼图将标签设置在视觉引导线上方
1 使用详解 (1)series.labelLine.length 说明:视觉引导线第一段的长度. (2)series.labelLine.length2 说明:视觉引导线第二段的长度. (3)ser ...
php百度地图添加标记,JavaScript API - 自定义标注 | 百度地图API SDK
实现initialize方法,当调用map.addOverlay方法时,API会调用此方法. 当调用map.addOverlay方法添加自定义覆盖物时,API会调用该对象的initialize方法用来 ...
Android 外部调起高德地图显示坐标点自定义标注高德地图 by Terry
下载链接: 点击下载demo 在App开发中,经常想在高德地图上标注我们想要的坐标点.其实这个动作很简单,但是,高德地图API开发文档把这一块藏得太隐蔽了.不太好找. 就几行代码. Intent i ...
OpenLayers标记地图点及点击地图点显示自定义弹出框
css代码(设置弹出框样式) /*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-webkit-filter: dr ...
ECharts如何制作省份地图并在地图上显示自定义图标/散点图
之前一直被客户提的一个需求烦恼着,他要只显示某个省份的地图,并且呢要在地图上显示小车的图标,还有其它一些点的信息.我以前只用过echarts做过图表,没做过地图,所以自己也是网上看了很多并且看了很多a ...
Vue Echarts 显示地图且根据坐标设置标注点
Vue Echarts 显示地图且根据坐标设置标注点哎哟我去我就想用Echarts在页面上画一张地图,这张地图显示全国,然后我有几个坐标点的经纬度信息,需要在这个地图上根据经纬度标注在Echart ...

Echarts显示自定义标注点/地图map引导线

Echarts显示自定义标注点/地图map引导线

Echarts显示自定义标注点/地图map引导线相关推荐

最新文章

热门文章