正文

如何用echarts4制作一个包含多个圆环图的复合图表，清晰展示数据对比

/0 浏览量
0718

在数据可视化领域，ECharts 是一个功能强大的 JavaScript 库，它可以帮助我们轻松地创建各种图表，包括圆环图。当需要同时展示多个数据集的对比时，我们可以通过组合多个圆环图来实现。以下是如何使用 ECharts4 制作一个包含多个圆环图的复合图表的详细步骤。

准备工作

在开始之前，请确保你已经引入了 ECharts4 的库。你可以从 ECharts 官网 下载或使用 CDN 链接引入。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

数据准备

假设我们有以下数据需要展示：

var data = [
    {
        name: '类别 A',
        value: 335
    },
    {
        name: '类别 B',
        value: 310
    },
    {
        name: '类别 C',
        value: 234
    },
    {
        name: '类别 D',
        value: 135
    },
    {
        name: '类别 E',
        value: 1548
    }
];

配置 ECharts 实例

首先，我们需要创建一个 ECharts 实例，并设置其容器。

var myChart = echarts.init(document.getElementById('main'));

设置复合圆环图

接下来，我们配置 ECharts 实例的选项。在这个例子中，我们将创建一个包含四个圆环图的复合图表。

var option = {
    series: [
        {
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['12%', '50%'],
            label: {
                show: false
            },
            data: [
                {value: data[0].value, name: data[0].name},
                {value: data[1].value, name: data[1].name},
                {value: data[2].value, name: data[2].name}
            ]
        },
        {
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['37%', '50%'],
            label: {
                show: false
            },
            data: [
                {value: data[3].value, name: data[3].name},
                {value: data[4].value, name: data[4].name}
            ]
        },
        {
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['62%', '50%'],
            label: {
                show: false
            },
            data: [
                {value: data[0].value, name: data[0].name},
                {value: data[1].value, name: data[1].name},
                {value: data[2].value, name: data[2].name}
            ]
        },
        {
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['87%', '50%'],
            label: {
                show: false
            },
            data: [
                {value: data[3].value, name: data[3].name},
                {value: data[4].value, name: data[4].name}
            ]
        }
    ]
};

myChart.setOption(option);

解释

在上面的代码中，我们创建了四个 type: 'pie' 的系列，每个系列代表一个圆环图。通过调整 radius 和 center 属性，我们可以将它们放置在画布上的不同位置，从而形成一个复合图表。

  • 第一个和第三个圆环图展示类别 A、B 和 C 的数据。
  • 第二个和第四个圆环图展示类别 D 和 E 的数据。

这样，我们就能在同一个图表中清晰地展示多个数据集的对比了。

总结

通过以上步骤，我们可以使用 ECharts4 制作一个包含多个圆环图的复合图表。这种方法适用于需要同时展示多个数据集对比的场景，能够帮助用户更直观地理解数据之间的关系。

-- 展开阅读全文 --