正文

如何用 ECharts 制作复合饼图：饼图与散点图巧妙结合，数据展示新视角

/0 浏览量
1031

在数据可视化领域，ECharts 是一款功能强大、易于使用的图表库。它不仅支持传统的图表类型，还能通过创新的方式将不同图表类型结合，形成复合图表。本文将介绍如何使用 ECharts 制作复合饼图，即将饼图与散点图巧妙结合，从而为数据展示提供新的视角。

1. 环境准备

在开始制作复合饼图之前，我们需要确保以下环境已经准备妥当：

  • 浏览器：ECharts 支持所有主流浏览器，包括 Chrome、Firefox、Safari 和 Edge。
  • ECharts 库：可以从 ECharts 的官网下载 ECharts.js 文件，并将其引入到 HTML 页面中。
  • HTML 和 CSS：制作图表需要基本的 HTML 和 CSS 知识。

2. 基础饼图

首先，我们需要创建一个基础的饼图。以下是一个简单的饼图示例代码：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '基础饼图'
    },
    tooltip: {},
    legend: {
        data:['系列1']
    },
    series: [
        {
            name: '系列1',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'系列1'},
                {value:274, name:'系列2'},
                {value:310, name:'系列3'},
                {value:335, name:'系列4'},
                {value:400, name:'系列5'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

这段代码创建了一个包含五个系列的饼图，每个系列表示不同的数据。

3. 散点图结合

接下来，我们将饼图与散点图结合。这需要我们在饼图的基础上，添加散点图元素。以下是一个结合饼图和散点图的示例代码：

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '复合饼图'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    series: [
        {
            name: '系列1',
            type: 'pie',
            radius: ['40%', '70%'], // 饼图的半径
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '系列1'},
                {value: 310, name: '系列2'},
                {value: 234, name: '系列3'},
                {value: 135, name: '系列4'},
                {value: 1548, name: '系列5'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '系列2',
            type: 'scatter',
            coordinateSystem: 'pie',
            symbolSize: function (val) {
                return val / 10;
            },
            data: [
                {value: 335, name: '系列2'},
                {value: 310, name: '系列2'},
                {value: 234, name: '系列2'},
                {value: 135, name: '系列2'},
                {value: 1548, name: '系列2'}
            ],
            emphasis: {
                label: {
                    show: true,
                    formatter: '{b}: {c}',
                    position: 'top'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

在这段代码中，我们创建了一个复合饼图，其中饼图半径分为两层，外层为饼图，内层为散点图。散点图数据与饼图数据相同，通过调整 symbolSize 函数，我们可以控制散点的大小。

4. 总结

通过将饼图与散点图结合，我们可以为数据展示提供新的视角。在实际应用中，我们可以根据需求调整饼图和散点图的样式、颜色和数据，以达到最佳的视觉效果。

希望本文能帮助你掌握 ECharts 制作复合饼图的方法。如果你有任何疑问或建议，请随时留言交流。

-- 展开阅读全文 --