最近有這樣的需求需要用到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>
上一張圖片吧
為了讓大家看的清楚，所以沒有進行數據和方法的處理，大家自己進行優化吧 。
代碼注釋已經寫得很詳細了，加班太累，先溜了~