如何利用百度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工作流
- 大黄蜂空中决战ComfyUI工作流
- 晚上樱花狐狸ComfyUI工作流
- 一个全脸彩绘和纹身的超级名模ComfyUI工作流
- 严寒的冬天里一只小鸟在森林的树枝上休息
- 树上挂着一只快乐的小樱桃
- 瀑布边坐着一位披着斗篷的隐士
- 一个可爱的人形小机器人和一只蜗牛在森林
- 一条闪闪发光的金鱼ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!