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