echarts雷达图怎么给每个拐点设置不同的颜色

前言

最近有这样的需求需要用到echarts的 雷达图 然后这不是主要的，因为基本的配置官网上都是有的，但是需求要求雷达图的每个拐点要有不同的颜色，这样比较有特色，我。。。最后在官网找了半天发现还是只能设置一个颜色，但是需求又要有不同的颜色，怎么办了？投机取巧吧
话不多说，主要的思路是通过绘制多个图形，每个图形设置自己的颜色，然后叠加在一起，产生视觉上的在一张图就可以了，直接上代码吧，不懂的可以去官网看看。

var itemArr = [90, 80, 70, 60, 50, 40];   //数据数组

var n1 = [90, '', '', '', '', '']
var n2 = ['', 80, '', '', '', '']
var n3 = ['', '', 70, '', '', '']
var n4 = ['', '', '', 60, '', '']
var n5 = ['', '', '', '', 50, '']
var n6 = ['', '', '', '', '', 40]
var n7 = ['', '', '', '', '', '']
var labelArr = ['外观', '拍照', '系统', '性能', '屏幕', '价格'] //显示图例用
option = {
        legend: {
            orient: 'vertical',
            left: '400px',
            bottom: '450',
            icon: 'circle',
            data: labelArr,
            textStyle: {
              color: '#000000'
            }
          },
    radar: [
        {
            splitLine: {
                lineStyle: {
                    color: '#000'
                }
            }
        },
        {
            indicator: [  //绘制总的图形
                {text: '外观', max: 100},
                {text: '拍照', max: 100},
                {text: '系统', max: 100},
                {text: '性能', max: 100},
                {text: '屏幕', max: 100},
                 {text: '价格', max: 100},
            ],
            nameGap: 6,
            center: ['50%', '50%'],
            radius: 105,
            name: {
                textStyle: {
                    color: '#000',
                    fontSize: 14,
                    fontWeight: 400,
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['none',
                        'none', 'none',
                        'none', 'none'],
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cde6f5'
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#cde6f5' //网格的颜色
                },
            }
        }
    ],
    series: [
        {
            type: 'radar', //绘制总的图形不设置拐点
            radarIndex: 1,
            data: [
                {
                    value: itemArr ,
                    symbolSize: 7,
                    lineStyle: {
                        width: 2,
                        color: '#29B8FF'
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.75,
                            color: '#f8f7f7'
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: '#000',
                    // show:false
                }
            },
            silent: true,
            z: 1 //图层是一层一层叠加，所以这个也是一级一级递增
        },
        {
            type: 'radar', //绘制第一个点
            radarIndex: 1,
            name: labelArr[0],
            silent: true,
            z: 2, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n1,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#A66CFE'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            }
        },
        {
            type: 'radar',
            radarIndex: 1, //绘制第二个点
            name: labelArr[1],
            silent: true,
            z: 3, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n2,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FFA662'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
              {
            type: 'radar', //绘制第三个点
            radarIndex: 1,
            name: labelArr[2],
            silent: true,
            z: 4, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n3,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#5AA4FB'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
               {
            type: 'radar', //绘制第四个点
            radarIndex: 1,
            name: labelArr[3],
            silent: true,
            z: 5, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n4,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FF858B'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
         {
            type: 'radar', //绘制第五个点
            radarIndex: 1,
            name: labelArr[4],
            silent: true,
            z: 6, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n5,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#7AF16F'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
         {
            type: 'radar', //绘制第六个点
            radarIndex: 1,
            name: labelArr[5],
            silent: true,
            z: 7, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n6,
                    symbolSize:7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#33A7BF'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
        {
            type: 'radar', //这个图层是为了盖住圆心，如果去掉，圆心的颜色为最后一个图层的颜色（不信就自己试试）
            radarIndex: 1,
            name: '',
            silent: true,
            z: 8, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n7,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#f8f7f7'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
    ]
}

上一张图片吧

为了让大家看的清楚，所以没有进行数据和方法的处理，大家自己进行优化吧 _。
代码注释已经写得很详细了，加班太累，先溜了~

转载需标注！
还请多多指教！