Echarts技巧–分割数据到数个饼图

引言

数据可视化是现代数据分析中不可或缺的一部分。它转化复杂数据为可视化图表，使得数据的理解和分析变得更加直观和高效。Echarts 作为一款优秀的数据可视化工具，提供了多种灵活的方法来展示数据。其中，将一组数据分割到数个饼图中，以时间序列或其他分类展示数据的方法，尤为显著。接下来，本文将深入探讨如何运用 Echarts 技术分割数据到数个饼图，并提供实例代码。

数据分割的重要性

在数据呈现中，有时需要将数据按照某个维度（如时间、地区、分类等）进行分割，使观众能够有效比较不同子集之间的数据。例如，在产品销售分析中，通过将数据按年份分割到不同的饼图中，可以快速看出各年度的销售构成，以及随时间变化的趋势。

Echarts 分割数据的实现方法

使用 Echarts 将数据分割到多个饼图的基本步骤如下：

使用 dataset 源数据配置，定义数据和结构。
通过 transform 过滤器，根据不同条件分割数据。
定义多个饼图系列（series），并分别指定它们的 datasetIndex 到不同的数据子集。
4.（可选）使用 media 查询来适应不同的屏幕布局和比例。

4.1 数据源配置和结构定义

首先，定义原始数据集，并在 dataset 中配置数据与结构。

dataset: [
  {
    source: [
      ['Product', 'Sales', 'Price', 'Year'],
      ['Cake', 123, 32, 2011],
      // ...其他年份和产品数据...
    ]
  },
  // ...后续的数据变换（过滤）配置...
]

4.2 数据过滤

通过数据变换功能，Echarts 允许用户基于条件过滤出所需的子集。在这个例子中，使用年份作为过滤条件。如下表示仅保留 Year 为 2011 的数据：

{
  transform: {
    type: 'filter',
    config: { dimension: 'Year', value: 2011 }
  }
}

对每个需要的年份重复以上过程，以得到各自对应的数据集。

4.3 定义饼图系列

使用 series 数组定义多个饼图系列，每个系列指定一个过滤后的数据集。

series: [
  {
    type: 'pie',
    radius: 50,
    center: ['50%', '25%'], // 饼图位置
    datasetIndex: 1 // 指定用第一个过滤后的数据集
  },
  // ...为其他年份配置饼图系列...
]

4.4 响应式布局配置

在响应式布局中，可以利用 media 查询来调整不同屏幕比例下饼图的布局。通过定义媒体查询条件和对应的选项配置，使饼图在不同设备上都有良好的显示效果。

media: [
  {
    query: { minAspectRatio: 1 },
    option: {
      series: [
        { center: ['25%', '50%'] },
        { center: ['50%', '50%'] },
        { center: ['75%', '50%'] }
      ]
    }
  },
  // ...其他布局配置...
]

实例代码

以下为使用 Echarts 将数据按年份分割到数个饼图的完整示例代码。代码涵盖了原始数据定义、数据过滤、饼图系列配置以及响应式布局的媒体查询。

option = {
  dataset: [
    {
      source: [
        ['Product', 'Sales', 'Price', 'Year'],
        // ...更多年份和产品数据...
      ]
    },
    // 数据源变换配置，过滤出 2011 年的数据
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2011 }
      }
    },
    // 过滤出 2012 年的数据
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2012 }
      }
    },
    // 过滤出 2013 年的数据
    {
      transform: {
        type: 'filter',
        config: { dimension: 'Year', value: 2013 }
      }
    }
  ],
  series: [
    // 2011 年的饼图系列
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '25%'], // 饼图位置
      datasetIndex: 1 // 使用第一个过滤后的数据集
    },
    // 2012 年的饼图系列
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '50%'],
      datasetIndex: 2
    },
    // 2013 年的饼图系列
    {
      type: 'pie',
      radius: 50,
      center: ['50%', '75%'],
      datasetIndex: 3
    }
  ],
  // 响应式布局配置
  media: [
    // 宽高比大于 1 时的布局
    {
      query: { minAspectRatio: 1 },
      option: {
        series: [
          { center: ['25%', '50%'] },
          { center: ['50%', '50%'] },
          { center: ['75%', '50%'] }
        ]
      }
    },
    // 默认布局配置
    {
      option: {
        series: [
          { center: ['50%', '25%'] },
          { center: ['50%', '50%'] },
          { center: ['50%', '75%'] }
        ]
      }
    }
  ]
};

结语

Echarts 的强大数据处理和图表展示功能使得它在数据可视化领域广受欢迎。了解如何将数据分割到数个饼图，有助于更有效地传达时间序列或其他分类维度的比较数据。借助上述技巧和实例代码，用户可以灵活构建直观、动态且吸引人的数据展示图表，以满足不同场景下的数据呈现需求。

原文链接：https://juejin.cn/post/7316880789526659112 作者：前端可视化砖家