2025年02月21日 建站教程
如何利用百度echarts做一个雷达图,并且根据不同分数值显示不同的颜色,比如大于90分显示红色,小于60分显示绿色之类的。
实现代码如下:
var color = ['#FF3877', '#FFBB32', '#06D3C4', '#FF7018'];
var Data = [{
name: "Vue版本",
value: 65
},
{
name: "UI组件库",
value: 75
},
{
name: "Css预处理器",
value: 98
},
{
name: "Eslint检查",
value: 55
},
{
name: "Sornar扫描",
value: 84
},
{
name: "mock接口占比",
value: 77
},
{
name: "CSS3",
value: 60
},
{
name: "HTML5",
value: 95
}];
var value = [];
var name = [];
var indicator = [];
var radarData = [];
var scatterData = [];
Data.map(function(e, i) {
value.push(e.value);
name.push(e.name);
var cor = color[0];
//开始判断
if (e.value > 90) {
cor = color[2]
} else if (e.value <= 90 && e.value > 80) {
cor = color[3]
} else if (e.value <= 80 && e.value > 60) {
cor = color[1]
} else {
cor = color[0]
}
indicator.push({
text: e.name,
max: 100,
color: cor
});
scatterData.push({
value: [e.value, i],
itemStyle: {
normal: {
color: cor,
borderColor: cor,
borderWidth: 2,
}
},
},
)
});
radarData.push({
value: value
}) option = {
backgroundColor: '#0b0e29',
tooltip: {
trigger: 'axis'
},
radar: [{
indicator: indicator,
name: {
show: true,
textStyle: {
fontWeight: "bold",
fontSize: 14,
}
},
center: ['50%', '50%'],
radius: '80%',
shape: 'circle',
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisTick: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
splitArea: {
show: true,
areaStyle: {
color: ["transparent"]
}
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(255,255,255,0.3)'
}
}
}],
polar: {},
angleAxis: {
type: 'category',
data: name,
boundaryGap: false,
clockwise: false,
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 20,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#bfbfbe'
},
},
series: [{
name: '',
type: 'radar',
tooltip: {
trigger: 'item'
},
symbol: 'none',
symbolSize: 6,
itemStyle: {
normal: {
color: '#fff',
borderColor: '#009afe',
borderWidth: 2,
}
},
lineStyle: {
color: "#ff9100",
width: 2
},
areaStyle: {
opacity: 1,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 1,
color: 'rgba(0, 154, 254, 0.6)',
},
{
offset: 0,
color: 'rgba(84, 114, 211, 0.6)',
}], false),
type: 'default',
},
data: radarData
},
{
name: '',
type: 'scatter',
coordinateSystem: 'polar',
symbolSize: 10,
data: scatterData
}]
};
本文链接:http://so.lmcjl.com/news/23593/