ECharts 柱状图与饼图组合实现产品销售可视化

数据可视化需求分析

在实际业务场景中，我们经常需要同时展示产品销售数据的整体分布和详细构成。ECharts作为一款强大的数据可视化库，能够通过组合不同类型的图表来实现这一需求。本文将介绍如何使用ECharts创建柱状图和饼图的组合图表，完整展示产品销售数据。

基础柱状图实现

首先，我们来看基础的柱状图实现。ECharts的柱状图配置主要包括以下几个部分：

1. 标题配置：设置图表的主标题和副标题
2. 提示框配置：定义鼠标悬停时的交互提示
3. 坐标轴配置：X轴为分类轴，Y轴为数值轴
4. 数据系列配置：定义柱状图的样式和数据

option = {
  title: {
    text: 'Product Sales',
    subtext: '2025 年销售情况'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}'
  },
  xAxis: {
    type: 'category',
    data: ['Product A', 'Product B', 'Product C', 'Product D'],
    axisLabel: {
      interval: 0,
      rotate: 45,
      align: 'right'
    }
  },
  yAxis: {
    type: 'value',
    name: 'Sales',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [{
    name: 'Sales Amount',
    type: 'bar',
    data: [
      { value: 120, itemStyle: { color: '#FF6347' } },
      { value: 200, itemStyle: { color: '#32CD32' } },
      { value: 150, itemStyle: { color: '#1E90FF' } },
      { value: 80, itemStyle: { color: '#FFD700' } }
    ],
    itemStyle: {
      borderRadius: 5
    }
  }]
};

添加图例功能

为了使图表更加直观，我们需要添加图例功能。ECharts通过legend配置项来实现图例显示：

legend: {
  data: ['Product A', 'Product B', 'Product C', 'Product D']
}

需要注意的是，当使用单一系列柱状图时，图例会默认显示系列名称而非分类名称。要实现分类名称作为图例，可以采用多系列叠加的方式。

多系列柱状图实现

通过创建多个数据系列，每个系列只包含一个产品的数据，可以实现分类名称作为图例的效果：

series: [
  {
    name: 'Product A',
    type: 'bar',
    barGap: '-100%',
    itemStyle: { color: '#FF6347' },
    data: [120, 0, 0, 0]
  },
  {
    name: 'Product B',
    type: 'bar',
    barGap: '-100%',
    itemStyle: { color: '#32CD32' },
    data: [0, 200, 0, 0]
  },
  // 其他产品类似配置
]

这种方法的原理是：

1. 每个系列对应一个产品
2. 使用barGap: '-100%'让柱体重叠
3. 每个系列只在对应产品位置有数据，其他位置为0

组合饼图实现

为了更直观地展示产品销售占比，我们可以添加一个饼图：

{
  name: 'Sales Distribution',
  type: 'pie',
  radius: '28%',
  center: ['75%', '35%'],
  data: [
    {value:120, name:'Product A', itemStyle: {color: '#FF6347'}},
    {value:200, name:'Product B', itemStyle: {color: '#32CD32'}},
    // 其他产品数据
  ],
  itemStyle: {
    emphasis: {
      blur: 10,
      offsetX: 0,
      color: 'rgba(0, 0, 0, 0.5)'
    }
  }
}

关键配置说明：

• radius：控制饼图大小
• center：控制饼图位置
• data中的itemStyle：保持与柱状图颜色一致
• emphasis：定义鼠标悬停效果

完整配置示例

结合上述技术点，完整的配置如下：

option = {
  title: {
    text: 'Product Sales',
    subtext: '2025 年销售情况'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}'
  },
  legend: {
    data: ['Product A', 'Product B', 'Product C', 'Product D']
  },
  xAxis: {
    type: 'category',
    data: ['Product A', 'Product B', 'Product C', 'Product D'],
    axisLabel: {
      interval: 0,
      rotate: 45,
      align: 'right'
    }
  },
  yAxis: {
    type: 'value',
    name: 'Sales',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      name: 'Product A',
      type: 'bar',
      barGap: '-100%',
      itemStyle: { color: '#FF6347' },
      data: [120, 0, 0, 0]
    },
    {
      name: 'Product B',
      type: 'bar',
      barGap: '-100%',
      itemStyle: { color: '#32CD32' },
      data: [0, 200, 0, 0]
    },
    {
      name: 'Product C',
      type: 'bar',
      barGap: '-100%',
      itemStyle: { color: '#1E90FF' },
      data: [0, 0, 150, 0]
    },
    {
      name: 'Product D',
      type: 'bar',
      barGap: '-100%',
      itemStyle: { color: '#FFD700' },
      data: [0, 0, 0, 80]
    },
    {
      name: 'Sales Distribution',
      type: 'pie',
      radius: '28%',
      center: ['75%', '35%'],
      data: [
        {value:120, name:'Product A', itemStyle: {color: '#FF6347'}},
        {value:200, name:'Product B', itemStyle: {color: '#32CD32'}},
        {value:150, name:'Product C', itemStyle: {color: '#1E90FF'}},
        {value:80, name:'Product D', itemStyle: {color: '#FFD700'}}
      ],
      itemStyle: {
        emphasis: {
          blur: 10,
          offsetX: 0,
          color: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

技术要点总结

1. 图例实现：通过多系列叠加方式实现分类名称作为图例
2. 颜色统一：保持柱状图和饼图中相同产品的颜色一致
3. 布局优化：合理调整饼图大小和位置，避免与柱状图重叠
4. 交互一致性：确保提示框和悬停效果在整个图表中表现一致

这种组合图表方式既展示了各产品的具体销售数值，又直观呈现了销售占比情况，非常适合产品销售分析场景。开发者可以根据实际需求调整图表布局、颜色和交互效果，创建更加丰富的数据可视化展示。