2025年01月01日 建站教程
百度 Echarts 中实现雷达图根据分数点显示每个不同颜色,您可以使用 Echarts 的特殊数据项 special 来设置每个维度的数据。首先,您需要为每个分数点设置一个颜色值。这可以通过在 special 中使用 color 数据项来完成。
具体实例如下:
option = {
radar: {
indicator: [
{ name: '维度1', max: 100 },
{ name: '维度2', max: 100 },
{ name: '维度3', max: 100 },
{ name: '维度4', max: 100 },
{ name: '维度5', max: 100 },
{ name: '维度6', max: 100 }
]
},
series: [{
type: 'radar',
data: [
{
value: [80, 50, 70, 40, 20, 90],
name: '分数1',
special: {
color: '#FF0000' // 设置分数1的颜色为红色
}
},
{
value: [60, 80, 90, 30, 50, 70],
name: '分数2',
special: {
color: '#00FF00' // 设置分数2的颜色为绿色
}
},
{
value: [40, 20, 60, 80, 30, 10],
name: '分数3',
special: {
color: '#0000FF' // 设置分数3的颜色为蓝色
}
}
]
}]
};
参考:根据分数自动调整颜色:
special: {
color: function(params) {
var index = params.dataIndex;
var value = params.value;
// 根据数据项的值和索引生成颜色
return 'linear-gradient(to right, #FFC107, #FF9800, #FF5722, #795548)';
}
}
本文链接:http://so.lmcjl.com/news/20514/