百度echarts八角雷达图radar区域图不同颜色-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:550px;"></div>
    <script type="text/javascript">
        var color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
        var chartData = [
            { name: 521, max: 100 },
            { name: 18, max: 100 },
            { name: 15, max: 100 },
            { name: 27, max: 100 },
            { name: 60, max: 100 },
            { name: 110, max: 100 },
            { name: 200, max: 100 },
            { name: 40, max: 100 },
        ];
        option = {
          grid: {
              containLabel: true,
              top: 'middle',
              left: 20,
              right: 20,
              height: '50%',
          },
          calculable: true,
          
          radar: [
              {
                  center: ['50%', '40%'], // 图的位置
                  indicator: [],
                  name: {
                      textStyle: {
                          color: '#225595',
                          fontSize: 12,
                      },
                  },
                  axisLine: {
                      show: false,
                  },
                  splitArea: {
                      show: false,
                  },
                  splitLine: {
                      show: false,
                  },
                  radius: '40%',
                  triggerEvent: true,
              },
          ],
          series: [
              {
                  type: 'radar',
                  symbol: 'none',
                  lineStyle: { color: 'rgba(0,213,255)', opacity: 1, width: 2 }, //线的颜色
                  data: [
                      {
                          value: [100, 50, 0, 0, 0, 0, 0, 50],
                          // 设置区域边框和区域的颜色
                          itemStyle: {
                              normal: {
                                  color: '#00D5FF',
                                  opacity: 1,
                              },
                          },
                      },
                      {
                          value: [50, 100, 50, 0, 0, 0, 0, 0],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                      {
                          value: [0, 50, 100, 50, 0, 0, 0, 0],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                      {
                          value: [0, 0, 50, 100, 50, 0, 0, 0],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                      {
                          value: [0, 0, 0, 50, 100, 50, 0, 0],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                      {
                          value: [0, 0, 0, 0, 50, 100, 50, 0],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                      {
                          value: [0, 0, 0, 0, 0, 50, 100, 50],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                      {
                          value: [50, 0, 0, 0, 0, 0, 50, 100],
                          itemStyle: {
                              normal: {
                                  color: 'rgba(0,213,255, 0)',
                              },
                          },
                          
                      },
                  ],
              },
          ],
        };
        option.radar[0].indicator = chartData
        for (let i = 0; i < chartData.length; i++) {
            let count = Number(chartData[i].name);
            if (count === 0) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0,
                    color: color[0],
                };
            } else if (count > 0 && count < 50) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.1,
                    color: color[1],
                };
            } else if (count >= 50 && count < 100) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.2,
                    color: color[2],
                };
            } else if (count >= 100 && count < 150) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.3,
                    color: color[3],
                };
            } else if (count >= 150 && count < 200) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.4,
                    color: color[4],
                };
            } else if (count >= 200 && count < 250) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.5,
                    color: color[0],
                };
            } else if (count >= 250 && count < 300) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.6,
                    color: color[1],
                };
            } else if (count >= 300 && count < 400) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.7,
                    color: color[2],
                };
            } else if (count >= 400) {
                option.series[0].data[i].areaStyle = {
                    opacity: 0.8,
                    color: color[3],
                };
            }
        }
        option.series[0].lineStyle.color = color
        radarData = echarts.init(document.getElementById("main"));
        radarData.setOption(option);
        window.addEventListener("resize", function() {
        	radarData.resize();
        })
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：