需要实现的效果：

官网里面的demo显示数值，都是在拐点处：

【解决】

1、只显示类目

　　　　　<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div><script>var arr1 = [60,73,85,40,60];var arr2 = [23,90,23,32,67];var mychart =  echarts.init(document.getElementById('mychart'));var option = {radar: [{indicator: [{text: '品牌', max: 100},{text: '内容', max: 100},{text: '可用性', max: 100},{text: '功能', max: 100},{text: '屏幕', max: 100}],center: ['50%','54%'],//调整雷达图的位置radius: 80,//半径，可放大放小雷达图axisLine: {//坐标轴线相关设置show: true,lineStyle: {color: 'red'}},splitLine : {show : true,lineStyle : {width : 1,color : 'red' // 图表背景网格线的颜色}},splitArea: {show: false,},name: {rich: {a: {color: 'red',lineHeight: 20},},formatter: (a)=>{return `{a|${a}}`}}},],series: [{type: 'radar',symbol: 'none',//去掉拐点的圈data: [{value: arr1,name: '某软件',areaStyle: {normal: {color: 'blue'}},lineStyle: {color:"rgba(255,255,255,0)"},},{value: arr2,name:'jja',areaStyle: {normal: {color: 'red' // 图表中各个图区域的颜色}},lineStyle: {color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色},}]},]};mychart.setOption(option);</script>

实现效果：

2、实现最简单的数值在类目下

<div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div><script>var arr1 = [60,73,85,40,60];var arr2 = [23,90,23,32,67];var mychart =  echarts.init(document.getElementById('mychart'));var option = {radar: [{indicator: [{text: '品牌', max: 100},{text: '内容', max: 100},{text: '可用性', max: 100},{text: '功能', max: 100},{text: '屏幕', max: 100}],center: ['50%','54%'],//调整雷达图的位置radius: 80,//半径，可放大放小雷达图axisLine: {//坐标轴线相关设置show: true,lineStyle: {color: 'red'}},splitLine : {show : true,lineStyle : {width : 1,color : 'red' // 图表背景网格线的颜色}},splitArea: {show: false,},name: {rich: {a: {color: 'red',lineHeight: 20},b: {color: '#fff',align: 'center',backgroundColor: '#666',padding: 2,borderRadius: 4}},formatter: (a,b)=>{return `{a|${a}}\n{b|999}`}}},],series: [{type: 'radar',symbol: 'none',//去掉拐点的圈data: [{value: arr1,name: '某软件',areaStyle: {normal: {color: 'blue'}},lineStyle: {color:"rgba(255,255,255,0)"},},{value: arr2,name:'jja',areaStyle: {normal: {color: 'red' // 图表中各个图区域的颜色}},lineStyle: {color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色},}]},]};mychart.setOption(option);</script>

3、实现最终效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title></title><script src="js/jquery.min.js"></script><script src="js/echarts.js"></script></head><body><div id="mychart" style="width:300px;height:300px;margin:0 auto;"></div><script>var arr1 = [60,73,85,40,60];var arr2 = [23,90,23,32,67];var mychart =  echarts.init(document.getElementById('mychart'));var option = {radar: [{indicator: [{text: '品牌', max: 100},{text: '内容', max: 100},{text: '可用性', max: 100},{text: '功能', max: 100},{text: '屏幕', max: 100}],center: ['50%','54%'],//调整雷达图的位置radius: 80,//半径，可放大放小雷达图axisLine: {//坐标轴线相关设置show: true,lineStyle: {color: 'red'}},splitLine : {show : true,lineStyle : {width : 1,color : 'red' // 图表背景网格线的颜色}},splitArea: {show: false,},},],series: [{type: 'radar',symbol: 'none',//去掉拐点的圈data: [{value: arr1,name: '某软件',areaStyle: {normal: {color: 'blue'}},lineStyle: {color:"rgba(255,255,255,0)"},},{value: arr2,name:'jja',areaStyle: {normal: {color: 'red' // 图表中各个图区域的颜色}},lineStyle: {color:"rgba(255,255,255,0)" // 图表中各个图区域的边框线颜色},}]},]};mychart.setOption(option);var i = -1;mychart.setOption({radar: [{name: {rich: {a: {color: 'red',lineHeight: 20},b: {color: '#fff',align: 'center',backgroundColor: '#666',padding: 2,borderRadius: 4}},formatter: (a,b)=>{i++;return `{a|${a}}\n{b|${arr1[i]}}`}}}]})</script></body>
</html>

效果：

ECharts 雷达图在类目值下面显示数值相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
echarts雷达图详细参数配置说明
应项目需求需要实现以下效果(当然也是最终的实现): 接下来主要关于下面的几个参数进行设置雷达图的圈数雷达图支持绘制的类型:圆形和多角形雷达图在容器中的位置:center决定也就是雷达图中心在容器 ...
echarts 雷达图一些自我总结
最近在使用echarts雷达图的时候有一些新得想分享一下,话不多说直接看代码 var option={//title: { text:null }, // 隐藏图表标题legend: {show: t ...
java 雷达反射面积_请问：如何使用基本反射率雷达图中的dBZ值判断天气情况？比如多云、雷雨、晴等。谢谢！...
请问:如何使用基本反射率雷达图中的dBZ值判断天气情况?比如多云.雷雨.晴等.谢谢!以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来 ...
ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
echarts 雷达图
1.配置数据(1)配置各个边角极限值var dataMax=[{name:'名称',max:最大值, color:'标签颜色'}](2)配置展示数据var radaData=[{name:'数据名称' ...
设置echarts雷达图label标签出现的位置聚拢或发散
目标效果: 用echarts画出雷达图后出现这样的情况在官网上label标签的 position属性只支持:top / left / right / bottom / inside / inside ...
echarts雷达图样式配置
雷达图背景颜色雷达图网格颜色 indicator文字颜色数据区域边框颜色雷达图内部射线颜色雷达图的圈数雷达图每圈具体数值的显示具体数值拐点样式 function getRadarChart ...
echarts 雷达图_如何把Echarts用成在线数据可视化工具
今天虎哥给大家介绍个新工具,用于数据可视化,它是一个开源的插件,由JavaScript编写并实现的.可以流畅的运行在PC端和移动端,兼容绝大部分浏览器.Echarts具有强大的交互性,官网: http ...

ECharts 雷达图在类目值下面显示数值

需要实现的效果：

ECharts 雷达图在类目值下面显示数值相关推荐

最新文章

热门文章