ECharts 中的雷达图与极坐标图绘制

在数据可视化领域，ECharts 是一个非常受欢迎的开源图表库。它提供了丰富的图表类型供开发者选择，包括但不限于柱状图、折线图、饼图、雷达图和极坐标图等。本文将深入探讨如何使用 ECharts 绘制雷达图和极坐标图，并提供相应的示例代码。

雷达图

雷达图（又称蜘蛛图或星形图）是一种多变量数据可视化方法，通常用于比较多个维度上的数据。在 ECharts 中，可以通过 series 的配置项来创建雷达图。

示例代码

// 假设我们有以下数据：
const data = [
  { name: 'A', value: [1, 2, 3, 4, 5] },
  { name: 'B', value: [6, 7, 8, 9, 10] },
  { name: 'C', value: [11, 12, 13, 14, 15] }
];

// 使用 ECharts 初始化图表
initChart('radar-chart', {
  tooltip: {
    trigger: 'axis'
  },
  radar: {
    indicator: [
      { name: 'A', max: 15 },
      { name: 'B', max: 15 },
      { name: 'C', max: 15 }
    ]
  },
  series: [{
    type: 'radar',
    data: data,
    smooth: true,
    label: {
      show: true
    },
    lineStyle: {
      width: 2
    }
  }]
});

function initChart(id, config) {
  const chartDom = document.getElementById(id);
  const myChart = echarts.init(chartDom);
  myChart.setOption(config);
}

解析

• 初始化图表：通过 echarts.init() 初始化一个图表实例。
• 配置雷达图：在配置对象中，设置 type 为 'radar' 来指定图表类型。indicator 配置项定义了每个维度的名称和最大值。
• 数据绑定：data 属性用于绑定数据，这里的数据结构应与 indicator 的数量相匹配。
• 样式设置：通过 label 和 lineStyle 设置图表的显示样式，如标签显示和线条宽度。

极坐标图

极坐标图（也称为极轴图或极坐标系图）是另一种用于展示多维度数据的图表类型，特别适合于表示角度和距离的关系。在 ECharts 中，同样可以通过特定的配置来实现极坐标图。

示例代码

// 假设我们有以下数据：
const data = [
  { name: 'Data1', value: [1, 2], angle: Math.PI / 4 },
  { name: 'Data2', value: [3, 4], angle: Math.PI / 2 },
  { name: 'Data3', value: [5, 6], angle: 3 * Math.PI / 4 }
];

// 使用 ECharts 初始化图表
initChart('polar-chart', {
  polar: {
    radius: ['40%', '70%'],
    center: ['50%', '50%']
  },
  series: [{
    type: 'scatter',
    data: data,
    symbolSize: function(val) {
      return val[0] * 10;
    },
    label: {
      normal: {
        show: true
      }
    },
    encode: {
      x: 1,
      y: 0,
      tooltip: [1, 2]
    }
  }]
});

function initChart(id, config) {
  const chartDom = document.getElementById(id);
  const myChart = echarts.init(chartDom);
  myChart.setOption(config);
}

解析

• 初始化图表：同上。
• 配置极坐标图：通过 polar 配置项来定义极坐标图的范围和中心点。
• 数据绑定：data 属性用于绑定数据，每个数据项包含值和角度信息。
• 样式设置：symbolSize 方法根据值动态调整散点大小，label 和 encode 配置项用于调整标签显示和数据编码。

通过以上示例，我们可以看到如何在 ECharts 中灵活地创建雷达图和极坐标图，并根据实际需求进行数据和样式定制。这些图表类型在数据分析和展示过程中具有广泛的应用价值。