web建站教程
     
  1. 首页
  2. 前端UI组件库
  3. AI项目和框架
  4. 前端知识
  5. AI应用
  6. IT知识
  7. ComfyUI插件
  8. 地图大全
  9. 休息站

百度echarts做一个雷达图(根据不同分数值显示不同颜色)

998 ℃

如何利用百度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文档官网介绍

百度echarts柱状图设置不同颜色(每根柱子一种颜色)

百度echarts图表数据为空如何展示"暂无数据"

百度echarts柱状图/折线图x轴显示全部文本(太长自动换行)

标签: echarts 百度echarts 雷达图

上面是“百度echarts做一个雷达图(根据不同分数值显示不同颜色)”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_2887.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 首页 > js
扣子空间 – 免费全能AI办公智能体
Trae:新一代免费的AI编程工具
上一篇:
下一篇:
x 打工人ai神器
x 扫一扫打开藏历小程序

打开微信“扫一扫”查看今日藏历!