最近有这样的需求需要用到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>
上一张图片吧
为了让大家看的清楚，所以没有进行数据和方法的处理，大家自己进行优化吧 。
代码注释已经写得很详细了，加班太累，先溜了~