Echarts雷达图单独设置拐点颜色，边框颜色，区域颜色

<template>
 <div id="echartBasic"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
 mounted() {
    var chartDom = document.getElementById('echartBasic')
    var myChart = echarts.init(chartDom)
    const dataObject = [
      {
        name: 'E',
        value: 3000
      },
      {
        name: 'S',
        value: 3000
      },
      {
        name: 'T',
        value: 3000
      },
      {
        name: 'J',
        value: 2000
      },
      {
        name: 'I',
        value: 3000
      },
      {
        name: 'N',
        value: 2500
      },
      {
        name: 'F',
        value: 3500
      },
      {
        name: 'P',
        value: 4000
      }
    ]
    const dataArray = dataObject.map(n => n.value)
    const minNum = Math.min(...dataArray)
    const maxNum = Math.max(...dataArray)
    const zhongNum = (maxNum - minNum) / 3 + minNum
    const option = {
      title: {},
      legend: {
        data: []
      },
      radar: [
        // 虚线
        {
          center: ['50%', '50%'],
          radius: 70,
          shape: 'circle',
          splitNumber: 4,
          color: ['#FFA939'],
          axisName: {
            formatter: '{value}',
            fontSize: 16,
            fontWeight: 'bolder',
            color: 'rgba(1, 242, 182, 1)'
          },
          splitArea: {
            areaStyle: {
              color: ['transparent', 'transparent', 'rgba(114, 172, 209, 0)', 'transparent', 'rgba(114, 172, 209, 0)']
            }
          },
          axisLine: {
            lineStyle: {
              color: '#E3E3E3'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#E3E3E3',
              type: 'dashed' //dashed  solid dotted 射线类型【实线 虚线】
            }
          },
          indicator: dataObject.map(n => ({
            name: n.name,
            max: maxNum,
            color: n.value >= zhongNum ? '#01F2B6' : '#D9D9D9'
          }))
        },
        // 实线
        {
          center: ['50%', '50%'],
          radius: 70,
          indicator: dataObject.map(() => ({max: maxNum})),
          splitNumber: 1,
          shape: 'circle',
          splitArea: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#E3E3E3',
              type: 'solid',
              width: 4
            }
          }
        }
      ],
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            // 真实的
            {
              symbol: 'none',
              value: dataArray,
              itemStyle: {
                normal: {
                  color: 'rgba(25, 255, 198, 0.8)' //拐点颜色
                }
              },
              lineStyle: {
                width: 2,
                labelLine: {
                  color: 'rgba(25, 255, 198, 0.8)' //拐点边框颜色
                }
              },
              areaStyle: {
                // 区域颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(171, 255, 129, 1)'},
                  {offset: 1, color: 'rgba(25, 255, 198, 1)'}
                ])
              }
            },
            // 虚假的
            {
              symbol: 'none',
              value: dataObject.map(() => zhongNum),
              itemStyle: {
                normal: {
                  color: 'rgba(182, 235, 255, 0.5)' //拐点颜色
                }
              },
              lineStyle: {
                width: 2,
                labelLine: {
                  color: 'rgba(182, 235, 255, 0.5)' //拐点边框颜色
                }
              },
              areaStyle: {
                // 区域颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.1, [
                  {offset: 0, color: 'rgba(226, 249, 255, 0.5)'},
                  {offset: 1, color: 'rgba(182, 235, 255, 0.5)'}
                ])
              }
            },
            // 拐点
            ...dataObject.map((n, index) => {
              return {
                type: 'radar',
                // 除了当前的，其他的设置无限大
                value: dataObject.map((_, i) => (i == index ? maxNum : maxNum * 100)),
                z: 2,
                itemStyle: {
                  normal: {
                    color: n.value >= zhongNum ? '#01F2B6' : '#D9D9D9'
                  }
                },
                lineStyle: {
                  width: 0,
                  labelLine: {
                    show: false //隐藏标示线
                  }
                }
              }
            })
            // {
            //   value: dataObject.map(() => maxNum),
            //   itemStyle: {
            //     normal: {
            //       color: '#01F2B6'
            //     }
            //   },
            //   lineStyle: {
            //     width: 0,
            //     labelLine: {
            //       show: false //隐藏标示线
            //     }
            //   }
            // }
          ]
        }
      ]
    }
    option && myChart.setOption(option)
  },
}
</script>
<style>
   #echartBasic {
      width: 210px;
      height: 210px;
      margin: 10px auto 8px auto;
    }
</style>