根据数据展示不同颜色的拐点和图例及在类目下展示数值
实现效果
实现代码
option = {
title: {
text: '亩均产量',
left: '3%',
top: '3%'
},
legend: {
orient: 'vertical',
right: '5%',
top: 'center',
data: ['玉米', '豆类', '水稻', '薯类', '小麦'],
textStyle: {
color: '#000000'
}
},
radar: [
{
splitLine: {
lineStyle: {
color: '#000'
}
}
},
{
center: ['50%', '55%'],
radius: 90,
nameGap: 6,
name: {
textStyle: {
color: '#000',
fontSize: 14,
fontWeight: 400
},
// 类目下的数值
rich: {
a: {
color: '#000',
lineHeight: 20
},
b: {
color: '#f00',
align: 'center',
backgroundColor: '#fff',
padding: 2,
borderRadius: 4
}
},
formatter: (a, b) => {
b.nameTextStyle.rich.b.color = b.value1;
return `{a|${a}}\n{b|${b.value}(吨/千公顷)}`;
}
},
indicator: [
{
text: '玉米',
max: 8792.55,
value: 7792.55,
value1: '#A66CFE'
},
{
text: '豆类',
max: 8792.55,
value: 3920.15,
value1: '#FFA662'
},
{
text: '水稻',
max: 8792.55,
value: 7058.56,
value1: '#5AA4FB'
},
{
text: '薯类',
max: 8792.55,
value: 7008.16,
value1: '#FF858B'
},
{
text: '小麦',
max: 8792.55,
value: 5264.2,
value1: '#7AF16F'
}
]
}
],
series: [
{
type: 'radar',//绘制第一个点
radarIndex: 1,
data: [
{
value: [7792.55, 3920.15, 7058.56, 7008.16, 5264.2],
symbolSize: 7,
lineStyle: {
width: 2,
color: '#29B8FF'
},
areaStyle: {
normal: {
opacity: 0.75,
color: '#f8f7f7'
}
}
}
],
itemStyle: {
normal: {
borderWidth: 0,
color: '#000'
}
},
silent: true,
z: 1
},
{
type: 'radar',
radarIndex: 1,
name: '玉米',
silent: true,
z: 2,
data: [
{
value: [7792.55, '', '', '', ''],
symbolSize: 7
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#A66CFE'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false
}
}
},
{
type: 'radar',
radarIndex: 1,
name: '豆类',
silent: true,
z: 3,
data: [
{
value: ['', 3920.15, '', '', ''],
symbolSize: 7
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#FFA662'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false
}
}
},
{
type: 'radar',
radarIndex: 1,
name: '水稻',
silent: true,
z: 4,
data: [
{
value: ['', '', 7058.56, '', ''],
symbolSize: 7
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#5AA4FB'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false
}
}
},
{
type: 'radar',
radarIndex: 1,
name: '薯类',
silent: true,
z: 5,
data: [
{
value: ['', '', '', 7008.16, ''],
symbolSize: 7
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#FF858B'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false
}
}
},
{
type: 'radar',
radarIndex: 1,
name: '小麦',
silent: true,
z: 6,
data: [
{
value: ['', '', '', '', 5264.2],
symbolSize: 7
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#7AF16F'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false
}
}
},
{
type: 'radar',//这个图层是为了盖住圆心,如果去掉,圆心的颜色为最后一个图层的颜色(不信就自己试试)
radarIndex: 1,
name: '',
silent: true,
z: 7,//图层是一层一层叠加,所以这个也是一级一级递增
data: [
{
value: ['', '', '', '', ''],
symbolSize: 7
}
],
itemStyle: {
normal: {
borderWidth: 2,
color: '#f8f7f7'
}
},
lineStyle: {
width: 0,
labelLine: {
show: false//隐藏标示线
}
}
}
]
};