关键词：
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示:
后来查资料,发现这个标签的文字是可以自定义的,定义方式如下:
1 formatter: function(text) 2 var strlength = text.length; 3 if(strlength % 2 == 1) 4 text = text.replace(/\\S2/g,function(match) 5 console.log(match); 6 return match + ‘\\n‘ 7 ) 8 else 9 text = text.replace(/\\S2/g,function(match) 10 console.log(match); 11 return match + ‘\\n‘ 12 ) 13 strlength = text.length; 14 text = text.substring(0,strlength - 1); 15 16 return text 17 ,
完整配置如下:
1 var option = 2 title: 3 text: ‘‘ 4 , 5 tooltip: , 6 legend: 7 x : ‘right‘, 8 y : ‘top‘, 9 data: [‘测评结果‘, ] 10 , 11 radar: 12 // shape: ‘circle‘, 13 name: 14 textStyle: 15 color: ‘#fff‘, 16 backgroundColor: ‘#999‘, 17 borderRadius: 3, 18 padding: [3, 5] 19 , 20 formatter: function(text) 21 var strlength = text.length; 22 if(strlength % 2 == 1) 23 text = text.replace(/\\S2/g,function(match) 24 console.log(match); 25 return match + ‘\\n‘ 26 ) 27 else 28 text = text.replace(/\\S2/g,function(match) 29 console.log(match); 30 return match + ‘\\n‘ 31 ) 32 strlength = text.length; 33 text = text.substring(0,strlength - 1); 34 35 return text 36 , 37 , 38 indicator: weidu 39 , 40 series: [ 41 name: ‘测评结果‘, 42 type: ‘radar‘, 43 // areaStyle: normal: , 44 data : [ 45 46 value : fenshu, 47 name : ‘测评结果‘ 48 , 49 ] 50 ] 51 ;
最后效果如下:
文字超过2个的会自动换行了
关于echarts生成雷达图的一些参数介绍
exportconstindustryFactorOption=title:text:‘雷达图‘,textStyle:color:‘rgba(221,221,221,1)‘,//标题颜色fontSize:14,lineHeight:20,,//标题的位置，此时放在图的底边left:‘center‘,top:‘bottom‘,,//图表的位置grid:position:‘center‘, 查看详情
32-vue之echarts-雷达图(代码片段)
ECharts-雷达图前言雷达图特点雷达图的基本实现雷达图的常见效果显示数值区域面积绘制类型完整代码前言本篇来学习写雷达图雷达图特点可以用来分析多个维度的数据与标准数据的对比情况雷达图的基本实现ECharts最基本的代码... 查看详情
echarts.js根据数值自定义radar雷达图拐点颜色
...经理问我，可以不可以做出这样的。设计图如下：因为才使用这个插件一天，也不是很熟悉，感觉原理应该差不多。就答应了下来。(自己挖坑==!)等真正做的时候，发现事情并没有这么简单。。后来的做法：把itemStyle提了出去，... 查看详情
echarts自适应
参考技术A使用Echarts绘制图表时，可能会遇到变形的问题。如下图：【变形图】其原因是Echarts在初始化实例的时候，对应dom元素的宽高还没有确定。解决方案也很简单：监听对应dom元素，如果大小发生变化，调用resize()方法。自... 查看详情
echarts图表变形与自适应解决方案
参考技术A使用Echarts绘制图表时，可能会遇到变形的问题。如下图：其原因是Echarts在初始化实例的时候，对应dom元素的宽高还没有确定。解决方案也很简单：监听对应dom元素，如果大小发生变化，调用resize()方法。自适应是浏览... 查看详情
echarts雷达图怎么给生成的数据拐点上增加文字描述
没有文字的是我已经做出来的效果，应该怎么在这个点上添加文字呢？有大佬告知一下吗？参考技术Aseries[i]-radar.label.show=true 查看详情
echarts雷达图点击事件
最近看见别人问的问题，点击雷达图的拐点，获取点击数据的问题，直接上代码。echarts配置问题：https://www.douban.com/note/509404582/<!doctypehtml><htmllang="us"><head> <metacharset="utf-8"> <title></title> < 查看详情
echarts如何改变柱状图的柱子的宽度当鼠标旋浮上去的时候
...，我也不会；2 整个柱状图放大缩小；参考 echart官网的demo 查看详情
解决ngx-echarts中点击区域过小的问题
参考技术A最近使用ngx-echarts在angular项目中实现柱状图，由于新增了柱状图的下钻功能，所以需要使用ngx-echart提供的click方法进行下钻，但是在实际开发中，由于柱状图的数值相差很大，所以有的柱状数据非常小，根本没办法进... 查看详情
解决echarts饼图文字过长重叠问题
参考技术A当我们使用Echarts饼图时如果文字过长会导致重叠在一起，如下图：解决方法：设置最小扇区角度，minAngle（最小的扇区角度（0~360），用于防止某个值过小导致扇区太小影响交互） 查看详情
echarts常用图表雷达图仪表盘图
1.雷达图1.1.雷达图的实现步骤步骤1ECharts最基本的代码结构<!DOCTYPEhtml><htmllang="en"><head> <scriptsrc="js/echarts.min.js"></script></head><body> 查看详情
echarts图的点击重复触发的问题及其解决(代码片段)
...的数据详情列表。如何添加鼠标点击事件？1.通常我们只使用了以下代码，通过配置项和数据显示图表。varmyChart=echarts.init(document.getElementById(‘chartBox‘));myChart.setOption(option);2.在myChart.setOption（option）后添加以下代码，即可触发... 查看详情
echart图的标题和图例重叠
参考技术A问题解决后解决方法在legend的data中添加空字符串可以换行 查看详情
使用phpword生成图表——雷达图
预计达到的效果什么是雷达图在工作表中以列或行的形式排列的数据可以绘制为雷达图。雷达图比较若干数据系列的聚合值。雷达图的类型有：雷达图和带数据标记的雷达图无论单独的数据点有无标记，雷达图都显示值相对于中... 查看详情
echarts动态改变图表的大小
...了解决这个问题，有了如下解决方案：其中父元素一定要使用行内样式的方式设定宽高。在处理echarts图表的时候，往往需要使用window.onresize来监听页面大小，从而进一步去改变echarts的大小，但是resize事件触发的频率极其频繁，... 查看详情
echarts饼状图的属性（浅认知）
参考技术A对各部分内容的认知title--图标的标题内容 text--》主标题文字 subtext--》副标题文字 left-------》主标题文字的对其方式：left，center，right ... 查看详情
百度echarts标题文字后面显示百分比
今天在用百度ECharts做饼状图的时候，客户提出一个要求，要在标题文字后面加百分比。如图，现在是鼠标移上去才显示有百分比。红框部分没有百分比。于是查看ECharts文档，加入以下参数，成功让红框部分显示出百分比。 查看详情
echarts的axislabel的文字内容过长的解决办法(代码片段)
通过查找资料学习，我总结了四种解决的办法，不一定是最好的，但是希望能够帮助到需要的童鞋，同时如果大家有什么更好的方法欢迎指导。方法一：这种方法就是将文本内容转换为字符串数组，然后再按需求换行，需要每行... 查看详情