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

如何利用百度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://m.ipkd.cn/webs_2887.html

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