标题:echarts 雷达图单独设置拐点的颜色
先上效果图:
配置信息:
option: {
title: {
text: '基础雷达图',
},
legend: {
data: ['预算分配(Allocated Budget)'],
},
radar: {
// shape: 'circle',
center: ['50%', '50%'],
// 设置段数
splitNumber: 3,
indicator: [
// 设置销售指示器为红色
{ name: '销售(Sales)', max: 100 },
{ name: '管理(Administration)', max: 100 },
{ name: '信息技术(Information Technology)', max: 100 },
{ name: '客服(Customer Support)', max: 100 },
{ name: '研发(Development)', max: 100, color: 'red' },
{ name: '市场(Marketing)', max: 100 },
],
// 坐标轴刻度
// axisTick: {
// lineStyle: {
// color: 'red',
// },
// },
// 指示器名称配置,如果不设置,会显示axisLine设置的颜色
name: {
color: '#333',
formatter: '【{value}】',
},
// 坐标轴轴线
axisLine: {
show: true,
lineStyle: {
color: 'red',
},
},
// 分割线
splitLine: {
show: true,
lineStyle: {
color: ['#000000', 'orange'],
},
},
},
series: [
//单独设置 某个拐点的颜色---根据层级来渲染,
// 1.全部数据 渲染各个点,层级设置1
// 2.单独拐点的设置一层,层级设置 2
{
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
z: 1,
data: [
{
value: ['27.50', 5.5, 20.0, 13.5, 35.0, 25.2],
name: '预算分配(Allocated Budget)',
// 显示数值
label: {
show: true,
formatter: function (params) {
// 查找 需要设置的index,单独设置
if (params.dimensionIndex == 4) {
params.data.label.color = 'red'
} else {
params.data.label.color = 'inherit'
}
return params.value
},
},
},
],
},
{
// 这是 第二步操作
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
z: 2,
data: [
{
// 思想是:设置无线大,去掉链接线即可
value: ['100000', 100000, 100000, 100000, 35.0, 100000],
name: '预算分配(Allocated Budget)',
},
],
itemStyle: {
normal: {
borderWidth: 2,
color: 'red',
// opacity: 0
},
},
lineStyle: {
width: 0,
labelLine: {
show: false, //隐藏标示线
},
},
},
],
},