最近有这样的需求需要用到echarts的 雷达图 然后这不是主要的，因为基本的配置官网上都是有的，但是需求要求雷达图的每个拐点要有不同的颜色，这样比较有特色，我。。。最后在官网找了半天发现还是只能设置一个颜色，但是需求又要有不同的颜色，怎么办了？投机取巧吧
话不多说，主要的思路是通过绘制多个图形，每个图形设置自己的颜色，然后叠加在一起，产生视觉上的在一张图就可以了，直接上代码吧，不懂的可以去官网看看。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>雷达图copy</title> <script src="../node_modules/echarts/dist/echarts.min.js"></script> </head> <body> <div id="main" style="width: 50rem;height: 35rem;"></div> <script> var myChart = echarts.init(document.getElementById(\'main\')) 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 //隐藏标示线 } }, }, ] } myChart && myChart.setOption(option) </script> </body> </html>
上一张图片吧
为了让大家看的清楚，所以没有进行数据和方法的处理，大家自己进行优化吧 。
代码注释已经写得很详细了，加班太累，先溜了~