需要實現的效果：
官網裏面的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>
效果：
