正文

教你一招！ECharts复合饼图：饼图柱状图结合，数据可视化新境界

/0 浏览量
1031

在数据可视化领域，ECharts 是一款功能强大、使用便捷的图表库。今天，我要给大家介绍一种独特的图表——ECharts复合饼图，它巧妙地将饼图和柱状图结合，为我们呈现了一个全新的数据可视化视角。

复合饼图的概念

复合饼图，顾名思义，就是将饼图和柱状图结合在一起，形成的一种新型图表。它既可以展示数据的整体占比，又能突出部分数据的详细信息。这种图表在展示复杂的数据关系时，具有很高的实用价值。

ECharts复合饼图的制作方法

1. 准备数据

首先，我们需要准备数据。以一个简单的例子来说明，假设我们要展示一家公司的产品销售额，数据如下：

产品类别 销售额（万元）
A 200
B 150
C 100
D 50

2. 引入ECharts库

接下来，我们需要在HTML文件中引入ECharts库。可以通过以下代码实现：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

3. 创建图表容器

在HTML文件中，我们需要创建一个用于展示图表的容器。可以使用以下代码：

<div id="main" style="width: 600px;height:400px;"></div>

4. 配置图表

在JavaScript代码中，我们需要配置图表的选项。以下是一个简单的ECharts复合饼图配置示例：

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

var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['产品A', '产品B', '产品C', '产品D']
    },
    series: [
        {
            name: '销售额',
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: [
                {value: 200, name: '产品A'},
                {value: 150, name: '产品B'},
                {value: 100, name: '产品C'},
                {value: 50, name: '产品D'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '销售额',
            type: 'bar',
            data: [
                {value: 200, name: '产品A'},
                {value: 150, name: '产品B'},
                {value: 100, name: '产品C'},
                {value: 50, name: '产品D'}
            ],
            itemStyle: {
                color: '#f00'
            },
            barWidth: '30%',
            barGap: '-100%'
        }
    ]
};

myChart.setOption(option);

5. 运行效果

将以上代码保存为HTML文件，并在浏览器中打开，即可看到ECharts复合饼图的效果。

总结

ECharts复合饼图是一种非常实用的图表类型，它将饼图和柱状图的优势结合在一起，为我们提供了更丰富的数据可视化视角。通过本文的介绍，相信你已经掌握了ECharts复合饼图的制作方法。希望你在实际应用中能够灵活运用，为你的数据可视化项目增色添彩！

-- 展开阅读全文 --