echarts 雷达图样式设置大全

效果：

option = {
    title: {
      text: 'Basic Radar Chart'
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    radar: {
      center: ['50%', '50%'],
      // 外半径占据容器大小
      // radius: '65%',
      // 指示器轴的分割段数
      splitNumber: 4,
      // shape: 'circle', // 雷达图形状
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
      ],

      // 统一设置name的样式（也可以在每个name上单独设置）
      name: {
        // 雷达图各类别名称文本颜色
        textStyle: {
          color: '#7367f0'
        }
      },

      // 坐标轴轴线相关设置(竖线)axisLine（中心散发的线）
      axisLine: {
        show: true,
        lineStyle: {
          color: '#7367f088'
          // width: 1,
          // type: 'solid'
        }
      },
      // 坐标轴在 grid 区域中的分隔线（圆圈）
      splitLine: {
        lineStyle: {
          color: '#7367f066',
          // width: 2,
          // type: 'dashed'
        }
      },
    },
    series: [
      {
        // name: 'showed where?',
        type: 'radar',
        areaStyle: {
          // 填充区颜色
          color: '#7367f066',
        },
        // 线条样式
        lineStyle: {
          normal: {
            color: '#7367f0',
            width: 1
          }
        },
        symbol: 'circle', // 拐点形状，rect=矩形，circle=圆形
        // 拐点的大小
        symbolSize: 4,
        // 小圆点（拐点）设置为白色
        itemStyle: {
          color: '#7367f0'
        },
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget'
            // 填充区样式可以为每个类别单独设置也可以在上层配置中统一设置
            // areaStyle: {
            //   // 填充区颜色
            //   color: 'rgba(0, 197, 200, 0.6)',
            // },
            // // 线条样式
            // lineStyle: {
            //       normal: {
            //             color: '#000',
            //             // width: 1
            //       }
            // },
            // symbol: 'circle', // 拐点形状，rect=矩形，circle=圆形
            // // 拐点的大小
            // symbolSize: 4,
            // // 小圆点（拐点）设置为白色
            // itemStyle: {
            //   color: '#7367f0'
            // },
          },
          {
            value: [5000, 14000, 28000, 26000, 42000],
            name: 'Actual Spending',
          },
        ]
      }
    ],
    // 在圆点上显示相关数据
    label: {
      show: true,
      color: '#7367f0',
      fontSize: 12
    },
  }