echarts map 解决label设置width height无效并附aliyun地图json地址

aliyun地图json地址 http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910102&lng=106.75113472219306&zoom=3.5 (没用过里面json不确定准确性)
做地图时，想要给label 加背景图，但是发现width height无效后改用rich 形式有效。
后来又发现无论怎么设置verticalAlign，都没有改变里层label的位置，经测试需要在外层设置行高verticalAlign才有效，输出formatter可以发现 marker字段中实质使用的是span
附图形效果和代码

graph.dataCenterMap = function (dom, data) {var myChart = echarts.init(document.getElementById(dom));var label1 = {normal: {position: 'top',// padding: [30, 0, 0, 0],// offset: [0, 10],color: '#1DE9B6',show: true,width: 3.54 * vwToPx,height: 5.09 * vhToPx,lineHeight: 5.09 * vhToPx,formatter: function (params) {console.log(params);var html = '';var info1 = params.data.info;var info2 = params.data.info2;if (info1) {html = info1;} else if (info2) {html = info2;}return ['{a|' + html + '}'];},fontSize: 12,// verticalAlign: 'bottom',backgroundColor: {image: '../../images/mapSend.png',},rich: {a: {padding: [0, 0, (5.09 * vhToPx) / 2, 0],align: 'center',color: '#fff',},},},};var labelData1 = [{ value: [125.774678, 44.389735], info: 10, info2: 8 },{ value: [126.57, 43.87], info: 7 },];// var temData1 = [];labelData1.some(function (item, index) {var temLabel = jQuery.extend(true, {}, label1);if (item.info) {temLabel.show = true;}item.label = temLabel;});// var uploadedDataURL = "/asset/get/s/data-1482909892121-BJ3auk-Se.json";myChart.showLoading();let index = -1;echarts.registerMap('mychina', geoJson);myChart.hideLoading();var option = {geo: [{map: 'mychina',// zIndex: -1,aspectScale: 0.75, //长宽比zoom: 1.1,roam: false,regions: [{name: '南海诸岛',opacity: 0,show: false,itemStyle: {opacity: 0,// 隐藏地图normal: {opacity: 0, // 为 0 时不绘制该图形},},emphasis: {normal: {opacity: 0, // 为 0 时不绘制该图形},},label: {show: false, // 隐藏文字},},],itemStyle: {normal: {borderWidth: 0, //设置外层边框borderColor: 'RGBA(72, 173, 220, 1)',shadowColor: 'RGBA(23, 68, 84, 0.62)',areaColor: 'RGBA(23, 50, 69, 0.5)',shadowOffsetX: -10,shadowOffsetY: 35,},emphasis: {areaColor: 'RGBA(27, 73, 91, 1)',borderWidth: 0,show: false,color: 'RGBA(27, 73, 91, 1)',label: {show: false,},},},},],series: [// 基础地图绘制{type: 'map',roam: false,label: {normal: {show: true,textStyle: {color: '#fff',},},emphasis: {show: false,textStyle: {color: '#fff',},},},itemStyle: {normal: {borderColor: 'RGBA(72, 173, 220, 1)',borderWidth: 1,areaColor: 'RGBA(23, 50, 69, 0.5)',},emphasis: {borderColor: 'RGBA(72, 173, 220, 1)',borderWidth: 1,areaColor: 'RGBA(23, 50, 69, 0.5)',},},zoom: 1.1,aspectScale: 0.75, //长宽比map: 'mychina', //使用// data: data[0],data: [{name: '延边州',selected: true,emphasis: {itemStyle: {areaColor: 'RGBA(72, 173, 220, 0.5)',borderColor: 'RGBA(72, 173, 220, 1)',borderWidth: 1,},},info: 10,info2: 7,},{name: '吉林市',selected: true,emphasis: {itemStyle: {areaColor: 'RGBA(72, 173, 220, 0.5)',borderColor: 'RGBA(72, 173, 220, 1)',borderWidth: 1,},},},],},// 点的绘制{type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 1,rippleEffect: {period: 15,scale: 2.5,brushType: 'stroke',},itemStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(72, 173, 220, 1)', // 0% 处的颜色},{offset: 1,color: 'rgba(0, 241, 215, 1)', // 100% 处的颜色},],global: false, // 缺省为 false},},},hoverAnimation: false,// label: {//   normal: {//     position: 'top',//     offset: [0, -10],//     color: '#1DE9B6',//     show: true,//     formatter: function (params) {//       console.log(params);//       var html = '';//       var info1 = params.data.info;//       var info2 = params.data.info2;//       if (info1) {//         html += '<div>发送' + info1 + '</div>';//       } else if (info2) {//         html += '<div>接收' + info2 + '</div>';//       }//       return html;//     },//   },// },itemStyle: {normal: {color: '#1DE9B6',/* function (value){ //随机颜色return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);}*/shadowBlur: 10,shadowColor: '#333',},},symbolSize: 8,data: [{ value: [125.774678, 44.389735], info: 10, info2: 8 },{ value: [126.57, 43.87], info: 7 },],// data: data[1], //points,},//地图线的动画效果{type: 'lines',zlevel: 2,effect: {show: true,period: 4, //箭头指向速度，值越小速度越快trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'pin', //箭头图标symbolSize: 8, //图标大小color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(72, 173, 220, 1)', // 0% 处的颜色},{offset: 1,color: 'rgba(0, 241, 215, 1)', // 100% 处的颜色},],global: false, // 缺省为 false},},lineStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'rgba(72, 173, 220, 1)', // 0% 处的颜色},{offset: 1,color: 'rgba(0, 241, 215, 1)', // 100% 处的颜色},],global: false, // 缺省为 false},width: 1, //线条宽度opacity: 0.1, //尾迹线条透明度curveness: 0.4, //尾迹线条曲直度},},// data: data[2],data: [{coords: [[125.774678, 44.389735],[126.57, 43.87], //右上],},{coords: [[116.4551, 40.2539],[143.4543, 18.9222], //右下],},{coords: [[113.12244, 23.009505],[60.4543, 25.9222], //左下],},],},// 对话框的绘制 发出{type: 'effectScatter',coordinateSystem: 'geo',showEffectOn: 'render',// zlevel: 1,rippleEffect: {period: 0,scale: 0,brushType: 'stroke',opacity: 0,},zlevel: 10,// opacity: 0,hoverAnimation: false,symbolSize: 0.000001,data: labelData1,// data: data[1], //points,},],};myChart.setOption(option, true);return myChart;
};

echarts map 解决label设置width height无效并附aliyun地图json地址相关推荐

html不能超出div的宽度,DIV设置width后超出父元素应该如何解决
这次给大家带来DIV设置width后超出父元素应该如何解决,解决DIV设置width后超出父元素的注意事项有哪些,下面就是实战案例,一起来看一下. 前言本文介绍的是利用CSS3的新属性box-siz ...
计算机设置登录密码无效,bios设置开机密码无效怎么办
bios可从CMOS中读写系统设置的具体信息. 其主要功能是为计算机提供最底层的.最直接的硬件设置和控制.那么bios设置开机密码无效怎么办呢?今天学习啦小编就和大家说说bios设置开机密码无效的解决 ...
echarts结合阿里云地图json选择器展示地图
效果: 1:引入echarts的官方JS:上手echarts文档使用示例: 2:配套你的地图json用这个,但是只到区:阿里云地图json选择器使用示例: 3:(1)推荐一个可以精确到镇街的地图选 ...
乡镇级echarts地图json获取、各省市区地图json文件
转载原文地址:https://blog.csdn.net/weixin_44861708/article/details/114223258 省市区地图json 链接:https://pan.baid ...
[css] 如何解决html设置height：100%无效的问题？
[css] 如何解决html设置height:100%无效的问题? 在外层包一个给定高度的 div 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客
HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客原文: HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客版权声明:本文为博主原创文章,未经博 ...
Hyper-V导出虚拟机/导入虚拟机步骤（克隆），以及克隆之后设置静态IP无效的解决办法
目录导出虚拟机导入虚拟机重点来了:克隆之后设置静态IP无效解决克隆之后设置静态IP无效在做微服务项目时,经常会用到多台机器来搭建服务环境.在不想一台一台虚拟机创建的情况下,克隆虚拟机是最好的 ...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
在设置了元素宽度width100%后再加上margin和padding超出父元素宽度,其实解决的方法很简单,直接使用CSS的 box-sizing 属性就可以解决这个问题,这个是CSS3新属性,可以将 ...
通过设置修改默认浏览器无效的解决办法--修改注册表
通过设置修改默认浏览器无效的解决办法--修改注册表问题描述: win7下通过控制面板设置Chrome为默认浏览器时无效(系统貌似默认IE浏览器为默认浏览器) 解决方法: 第一步:快捷键win+R , ...

echarts map 解决label设置width height无效并附aliyun地图json地址

echarts map 解决label设置width height无效并附aliyun地图json地址相关推荐

最新文章

热门文章