带刻度的雷达图

作者: 芳玥 | 来源:发表于2021-12-16 20:12 被阅读0次
    // prettier-ignore
    option = {
      animation: false,
      color: [
        '#e16857',
        '#eecb57',
        '#61a4e8',
        '#9570e5',
        '#605ff0',
        '#7dcf51',
        '#ff7f50',
        '#87cefa',
        '#da70d6',
        '#32cd32',
        '#6495ed',
        '#ff69b4',
        '#ba55d3',
        '#cd5c5c',
        '#ffa500',
        '#40e0d0',
        '#1e90ff',
        '#ff6347',
        '#7b68ee',
        '#00fa9a',
        '#ffd700',
        '#6699FF',
        '#ff6666',
        '#3cb371',
        '#b8860b',
        '#30e0e0'
      ],
      title: {
        text: '风格趋势雷达',
        x: 'center',
        y: 'top',
        padding: [18, 10],
        textStyle: {
          fontSize: 14,
          color: '#666666'
        }
      },
      tooltip: {
        textStyle: {
          fontSize: 12
        },
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        extraCssText: 'box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);'
      },
      legend: {
        data: ['2021/11', '2021/10', '2021/06'],
        y: 'bottom',
        selectedMode: false
      },
      radar: {
        // radius: 120,
        // startAngle: 90,
        splitNumber: 4, 
        // splitArea: {
        //   show: false
        // },
        // name: {
        //   textStyle: {
        //     color: 'balck'
        //   }
        // },
        // axisLabel: {},
        indicator: [
          {
            axisLabel: {
              show: true
            },
            name: '财务杠杆',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '市值',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '成长',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '流动性',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '波动性',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '估值',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '贝塔',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '盈利性',
            // min: 0,
            // max: 16
          },
          {
            axisLabel: {
              show: false
            },
            name: '动量',
            // min: 0,
            // max: 16
          }
        ]
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              name: '2021/11',
              value: [
                15.998832686423341, 6.338972610111871, 11.805093811324156,
                10.3963095373926, 1.6066210212635186, 13.767066356971961,
                0.01887769166170461, 5.75495829961076, 3.2038119772289173
              ]
            },
            {
              name: '2021/10',
              value: [
                13.692718993676907, 6.1865702354568395, 14.544951490483118,
                11.045261122149888, 1.660129749945325, 12.287997580823204,
                1.2420291251985214, 5.814054800589165, 2.7939046957515834
              ]
            },
            {
              name: '2021/06',
              value: [
                16, 6.967284888128151, 6.973686919070198, 9.192795250183515,
                0.04295927726068083, 7.039608528103502, 2.7936275974466063,
                3.8849719561196805, 6.158877320734007
              ]
            }
          ]
        }
      ]
    };
    

    这么一个options,也能雷达图带刻度。
    卧槽,翻半天文档,都没看到说indicator都能axisLabel,splitNumber控制几等分。

    应该object里都能塞axisLabel去试试不同的效用?

    相关文章

      网友评论

        本文标题:带刻度的雷达图

        本文链接:https://www.haomeiwen.com/subject/nlovfrtx.html