设置echarts雷达图label标签出现的位置聚拢或发散

目标效果：

用echarts画出雷达图后出现这样的情况

在官网上label标签的 position属性只支持：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight

这些肯定是不够的，所有官网还有 labelLayout 属性，可对标签位置进行修改以实现想要的标签布局效果。为了让标签效果改成这样

所以根据三角形的勾股定理，就可以更改位置

在系列中加上labelLayout

labelLayout(params) {
//定义要返回的最值x，ylet xpx,ypx;
//获取图片中心点let elem = document.getElementById(id);let dot =[elem.offsetWidth/2,elem.offsetHeight/2];
//获取实际的长和宽let xlength = dot[0]-params.rect.x;let ylength = dot[1]-params.rect.y;
//根据勾股定理得到斜边长度let hypot = Math.sqrt(xlength*xlength+ylength*ylength);
//设置你要让label标签向内移动多少像素let leng = 20;
//得到倍数let mult = leng/hypot;
//判断标签与中心点位置关系（如果实际label的x轴的位置在中心右侧）if(params.rect.x>dot[0]){
//label的x轴位置左挪动（减的是 实际宽度*比例）xpx = params.rect.x - Math.abs(xlength)*mult;
//判断标签与中心点位置关系（如果实际label的x轴的位置在中心左侧）}else if(params.rect.x<dot[0]){
//label的x轴位置右挪动（加的是 实际宽度*比例）xpx = params.rect.x + Math.abs(xlength)*mult ;
//否则在和中心x轴相同，就不需要移动}else{
//label的x轴就在原来位置xpx = params.rect.x;}
//下面y轴同上if(params.rect.y>dot[1]){ypx = params.rect.y - Math.abs(ylength)*mult;}else if(params.rect.y<dot[1]){ypx = params.rect.y + Math.abs(ylength)*mult ;}else{ypx = params.rect.y;}
//返回坐标return {x: xpx,y: ypx,verticalAlign: 'middle',align: 'middle'}}

向四周发散就把里面的加号/减号换一下就行。

若有别的方法还望大佬指点

设置echarts雷达图label标签出现的位置聚拢或发散相关推荐

echart饼图标签重叠_怎么让ECharts饼图的label标签不重叠?
1.怎么让ECharts饼图的label标签不重叠? 使用ECharts饼图,如果有的项目占比很小,饼图所占空间也比较小的时候,会出现label标签重叠.标签被截断的情况(图1). 可以通过设置rad ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
echarts雷达图文字不显示_ECharts雷达图指示器名称的设置
radar.name | Object 雷达图每个指示器名称的配置项. radar.name.show | boolean [ default: true ] 是否显示雷达图指示器的名 ...
echarts雷达图怎么给每个拐点设置不同的颜色
前言最近有这样的需求需要用到echarts的雷达图然后这不是主要的,因为基本的配置官网上都是有的,但是需求要求雷达图的每个拐点要有不同的颜色,这样比较有特色,我...最后在官网找了半天发现还是只 ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
echarts 雷达图
1.配置数据(1)配置各个边角极限值var dataMax=[{name:'名称',max:最大值, color:'标签颜色'}](2)配置展示数据var radaData=[{name:'数据名称' ...

设置echarts雷达图label标签出现的位置聚拢或发散

设置echarts雷达图label标签出现的位置聚拢或发散相关推荐

最新文章

热门文章