雷达图

图表底层基于 ECharts，所以 参考 ECharts 官方配置项文档 使用即可。

同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。

实时调试预览

柱状图其它相关组件示例请在组件示例平台搜索查看。

雷达图适应的问题场景

雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。专门用来进行多指标体系比较分析的专业图表。从雷达图中可以看出指标的实际值与参照值的偏离程度，常用于倾向分析和重点把握。

且扩展了以下功能

• 扩展了雷达图上的指示器，类似于 AxisPointer 的样式，并支持自定义

• 扩展了雷达图的数据展示样式，包括数据顺序和标记点样式

• 增加雷达图曲线模式

概念约定

【约定】：dv 开头的配置项称作【自定义配置项】

【约定】：每个标记整体命名为【图形】，图形中的最小单元形状命名为【图元】

雷达图的数据结构

信息

数据结构方面，为了方便数据选择和针对相同 Series 数据操作，雷达图的数据可以包含在单一数据数组或多个数据数组中，具体可见下方示例。

单一数组示例配置：

// 所有数据放入同一 Series
const dataList = [
  {
    value: [5, 4, 3, 3.5, 2, 1],
    name: 'Series1'
  },
  {
    value: [1, 2, 5, 4.5, 4, 5],
    name: 'Series2'
  }
];

const option = {
  // 配置雷达图坐标系
  radar: {
    indicator: indicatorData
  }
  // 配置 Series
  series: {
    type: 'dvRadar',
    data: dataList,
  },
  // 此时图例中的数据可以显示对应颜色，但无法操作 Series 中的数据
  legend: {
    data: ['Series1', 'Series2'],
    selectedMode: false
  },
}

多个数组示例配置：

// 多个组的数据放入多个 Series 所需的数据数组
const data0 = [
  {
    value: [5, 4, 3, 3.5, 2, 1],
    name: 'Series1'
  }
];
const data1 = [
  {
    value: [1, 2, 5, 4.5, 4, 5],
    name: 'Series2'
  }
];

const option = {
  // 配置雷达图坐标系
  radar: {
    indicator: indicatorData
  }
  // 根据多个数据配置 Series
  series: [
    {
      type: 'dvRadar',
      name: 'Series1',
      data: data0,
    },
    {
      type: 'dvRadar',
      name: 'Series2',
      data: data1,
    }
  ],
  // 此时图例中的数据可以显示对应颜色，且可以与 Series 中的数据联动
  legend: {
    data: ['Series1', 'Series2'],
    selectedMode: true
  },
};

实时调试预览

function Example() {
  const indicatorData = [
    {
      name: '变量 1',
      max: 5,
      min: 0,
      axisLabel: {
        show: true,
        margin: -5,
        showMinLabel: false,
        color: 'rgba(0,0,0,0.6)',
        fontSize: 8,
        align: 'center'
      }
    },
    { name: '变量 2', max: 5, min: 0 },
    { name: '变量 3', max: 5, min: 0 },
    { name: '变量 4', max: 5, min: 0 },
    { name: '变量 5', max: 5, min: 0 },
    { name: '变量 6', max: 5, min: 0 }
  ];

  let currentIndicator = 0;

  const dataList = [
    {
      value: [5, 4, 3, 3.5, 2, 1],
      name: 'Series1'
    },
    {
      value: [1, 2, 5, 4.5, 4, 5],
      name: 'Series2'
    }
  ];

  let option = {
    legend: {
      data: ['Series1', 'Series2'],
      icon: 'roundRect',
      itemWidth: 8,
      itemHeight: 2,
      left: 150,
      textStyle: {
        color: 'rgba(0,0,0,0.6)',
        fontSize: 12
      },
      selectedMode: false
    },

    series: {
      type: 'dvRadar',
      data: dataList,
      dvSectorSelector: {
        lineStyle: {
          stroke: '#979797',
          lineWidth: 1,
        },
        sectorStyle: {
          fill: 'rgba(18, 18, 18, 0.1)'
        },
        pointerOffset: 10,
      }
    },

    tooltip: {
      formatter: params => {
        let index = params.dataIndex - dataList.length;
        if (index < 0) {
          index = currentIndicator;
        } else {
          currentIndicator = index;
        }
        let str =
          ` <div style="font-family: Microsoft YaHei;">
              <div style="font-size:14px;font-weight:400;color:rgba(255,255,255,0.84);">` +
          indicatorData[index].name +
          `</div>`;
        dataList.forEach(series => {
          const data = series.value;
          str +=
            `<div style="width: 90px; margin: 0 8px 0 0;display: flex; align-items: center; justify-content: space-between;">
            <div style="font-weight:700;color:rgba(255,255,255,0.84)">` +
            series.name +
            `</div>
              <div style="font-weight:700;color:rgba(255,255,255,0.84)">` +
            data[index] +
            `</div>
            </div>`;
        });
        str += `</div>`;
        return str; //解决未在拐点悬浮 undefine 问题
      },
      extraCssText: 'background: #3B3B3B; box-shadow: rgba(0, 0, 0); border-radius: 4px; padding: 8px'
    },
    radar: {
      indicator: indicatorData
    }
  };

 // 以下为 Demo 固定内容，一般不修改
 return (
    <StandardChart
      style={{ width: 750, height: 250 }}
      theme="mobile-app-light"
      option={option}
    />
  );
}

自定义配置项

以下配置项只在 series.type: 'dvRadar 时有效

series.highlight

• 类型

    HighlightOption {
      show?: boolean; // 是否显示，v.1.10.2+版本可用
      areaStyle?: PathStyleProps; // 扇形区域的样式
      backgroundStyle?: PathStyleProps; // 高亮对应弱化的背景色
      markStyle?: PathStyleProps; // 蒙版的样式
      lineStyle?: LineStyleOption; // 高亮线条的样式
    }

• 描述 定义雷达图高亮功能样式(由于实现原因，对于多系列还未支持)

series.dvSectorSelector

• 类型

  dvSectorSelector: {
    show?: boolean; // 是否显示扇形选择器，v.1.2.2+版本可用
    lineStyle?: LineStyleOption; // 指针线的样式
    sectorStyle?: PathStyleProps; // 扇形区域的样式
    symbolStyle?: PathStyleProps; // 点的样式
    pointerOffset?: number; // 指针伸出坐标系的长度
  }

• 描述 定义雷达图选择器样式

series.dvClockWise

• 类型 boolean
• 描述 设置数据是否按照顺时针顺序排列，此设置仅对系列内图形生效，雷达图坐标轴数据需自行调整

series.dvSmooth

• 类型 number
• 描述 设置雷达图曲线模式曲率

雷达图 token 设置

以下 token 只在 series.type: 'dvRadar 时有效：

  radarSysShape, // 雷达图坐标系形状，支持 'polygon' 和 'circle'
  radarSysLine, // 雷达图坐标系轴线样式
  radarSysArea, // 雷达图坐标系分割区域填充样式
  radarSysName, // 雷达图坐标系轴标签样式
  radarSysRadius, // 雷达图坐标系半径长度
  radarLineStyle, //雷达图线样式
  radarAreaStyle, //雷达图填充样式

以下 token 可以用于其他 series，但是也对 series.type: 'dvRadar 的图表有效：

  symbolSize, // 雷达图标点样式
  legendIcon, // 图例图标设置
  legendStyle, // 图例样式

token 的详细机制、应用教程和开发方案请参考Token文档