如何利用百度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
}]
};
百度echarts雷达图radar根据分数点显示每个不同颜色
百度echarts柱状图/折线图x轴显示全部文本(太长自动换行)
上面是“百度echarts做一个雷达图(根据不同分数值显示不同颜色)”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2887.html
workflows工作流
Latent放大comfyui工作流
蝴蝶兰comfyui工作流
一只可爱的小鸟在飞翔ComfyUI工作流
严寒的冬天里一只小鸟在森林的树枝上休息
一匹热血沸腾的汗血宝马庄严地站立着ComfyUI工作流
一个迷人的女人ComfyUI工作流
一个戴着破旧莎帽子的机械忍者站在冰林中
潜水员,珊瑚,鲸鱼,潜水艇comfyui工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

jquery鼠标滑过图片边框特效(jquery.focus-follow插件)
自动打字效果(惊喜在后面)
如何利用css3+js做一个下雨效果
黑客入侵效果代码
3d文字360度旋转
利用css3做一个动态loading效果
一个包含老黄历、佛历、道历、星宿等数据的日历网站
利用js+css3做一个小鱼游泳特效











