echarts地图tooltip添加标注
myCharts.setOption({ tooltip: { triggerOn: 'click', enterable: true, formatter: function(params, ticket, callback) { console.log(params.length) let content = { area: 1, areaName: params.name } let result = that.$axios({ method: 'get', url: that.getMapCompany, params: content }).then(res => { console.log(params, content, 'log') }) var tipHtml = ''; tipHtml = '<div style="width:200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">' +'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">' +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+ params.name +'</span>'+'</div>' +'<div>' +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>' +'公司数量:'+'<span style="color:#f48225;margin:0 6px;">'+3+'</span>'+'个'+'</p>' +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>' +'被考核主体数量'+'<span style="color:#f4e925;margin:0 6px;">'+4+'</span>'+'个'+'</p>' +'</div>'+'</div>'; return tipHtml; return result; } }, series: [ { type: 'map', map: 'china', zoom: 1, label: { show: true, color: 'white', fontSize: 10 }, itemStyle: { normal: { borderWidth: 2,//边际线大小 borderColor:'#00ffff',//边界线颜色 areaColor:'#09295b'//默认区域颜色 }, emphasis: { show: true, areaColor: '#3066ba',//鼠标滑过区域颜色 label: { show: true, textStyle: { color: '#fff' } } } }, } ], })
本文来自博客园,作者:小刺猬的大宝贝,转载请注明原文链接:https://www.cnblogs.com/lgnblog/p/14839913.html