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

需要实现的效果：

官网里面的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>

效果：