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

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

2025-04-29 22:45:46作者:滑思眉Philip

数据可视化需求分析

在实际业务场景中,我们经常需要同时展示产品销售数据的整体分布和详细构成。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. 交互一致性:确保提示框和悬停效果在整个图表中表现一致

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

登录后查看全文
热门项目推荐
相关项目推荐