[]
        
在线Demo 免费试用
(Showing Draft Content)

柱状图

1. 概述

1.1 功能概述

柱状图作为数据可视化领域的关键工具,凭借柱子高度直观呈现数据大小,助力用户迅速洞察不同类别数据间的差异,广泛应用于各行业数据对比分析场景。在Wyn中,为满足多样化的数据分析需求,提供了以下三种柱状图类型:

  • 柱状图:最基本的柱状图,每个柱子独立显示,主要用于比较不同类别的数据大小。例如在电商销售分析中,通过它可快速对比不同商品的月销量,让商家明确畅销与滞销商品。

  • 堆叠柱状图:将多个数据系列的柱子进行堆叠,每个柱子的总高度表示数据的总和,而柱子内部的不同颜色则表示不同系列在总和中所占的比例。以企业成本分析为例,可展示人力、原材料、运营等各项成本在总成本中的占比及变化趋势,助于管理者精准把控成本结构。

  • 百分比堆叠柱状图:与堆叠柱状图类似,但柱子的高度均表示为100%,柱子内部各部分以百分比的形式展示其在整体中所占的比例。在市场份额分析中,能清晰呈现各品牌在市场中的相对地位及份额变化,为企业制定市场策略提供有力依据。

2. 操作步骤

本文将指导您在Wyn中创建和使用柱状图。

2.1 前提条件

  1. 数据要求: 已完成数据连接与数据准备,本文将以本地Excel文件缓存数据集为例演示操作流程。

  2. 界面要求: 已进入仪表板设计界面,且仪表板至少已绑定一个数据集/数据模型(如“Excel数据-缓存数据集”)。

2.2 操作步骤

2.2.1 添加组件

  1. 仪表板设计界面最左侧,单击组件按钮展开列表,选择柱状图,按住鼠标左键将其拖拽至仪表板设计区域,成功添加一个柱状图组件。

    PixPin_2025-05-30_13-45-59

2.2.2 绑定数据

  1. 仪表板设计器设计区域选中柱状图,根据实际需求,将对应的字段拖动到数据绑定区域,完成数据绑定。例如在本示例中,需将“销售大区”字段拖动到分类区域,将“订单金额”字段拖动到数值区域。

    PixPin_2025-05-30_13-47-20

  2. 数据绑定区域介绍参考下表:

    示意图

    数据绑定区域

    说明

    PixPin_2025-07-29_14-08-55

    数值

    绑定数值类字段,可绑定一个或多个字段

    如果已经在系列区域绑定了字段,则数值区域将无法绑定多个字段

    分类

    绑定组件的分析维度,可绑定一个或多个字段

    系列

    绑定组件分析的系列,扩展分类纬度,可绑定一个字段

    如果数值中已绑定多个字段,则不可以绑定系列

    提示标签

    提示标签是指当鼠标移至图形时,会出现相应的提示信息。使用方法详见鼠标提示标签

    钻取

    设置组件数据钻取路径,详见数据钻取

2.2.3 数据处理

  1. 组件完成数据绑定后,可自由调整字段属性(如格式修改、重命名、聚合方式切换)并执行快速运算,具体操作步骤请参考数据绑定与动态计算

    PixPin_2025-05-30_13-53-51

    注意: 对数据集中字段进行的操作会在当前仪表板中的所有组件生效;而对组件数据绑定区字段进行的操作仅在当前组件生效。

2.2.4 组件属性

  1. 数据处理完成后,可通过以下属性配置进一步优化组件展示效果:

    属性

    说明

    系统图示

    图表样式

    自定义图表数据点样式,例如:设置调色板、自动渐变、圆角半径等属性

    PixPin_2025-05-30_15-12-00

    动画

    设置组件入场动画、轮播和轮播间隔

    数据设置

    设置显示所有维度和缩放轴

    数据交互

    配置联动、跳转、刷新等行为

    标题

    组件标题的样式属性

    数据标签

    显示组件数据点标签和内容

    提示标签

    鼠标悬停时显示数据点详细信息

    分类轴

    对图表的分类轴进行设置

    数值轴

    对图表的数值轴进行设置

    图例

    显示组件中不同颜色/形状代表的数据含义

    钻取设置

    自定义钻取路径的显示样式

    特殊数据

    自定义空值/空白数据的显示规则

    无数据样式

    组件无数据时的显示内容和背景图片

    布局大小

    调整组件位置于整体尺寸

    外观样式

    调整组件外观样式

  2. 柱状图额外支持以下独有属性:

  • 图表类型切换: 在属性设置中,可通过「图表样式>图表类型」轻松切换不同的柱状图类型,以满足不同分析需求。 图表类型具体介绍参考下表:

    PixPin_2025-06-09_09-51-44

    图表类型

    描述

    示例

    柱状图

    每个柱子独立显示,主要用于比较不同类别的数据大小。

    PixPin_2025-05-30_15-14-05

    堆叠柱状图

    将多个数据系列的柱子进行堆叠,每个柱子的总高度表示数据的总和。

    而柱子内部的不同颜色则表示不同系列在总和中所占的比例。

    PixPin_2025-05-30_15-14-25

    百分比堆叠柱状图

    与堆叠柱状图类似,但柱子的高度均表示为100%。

    柱子内部各部分以百分比的形式展示其在整体中所占的比例。

    PixPin_2025-05-30_15-14-36

2.2.5 数据探索与分析

  1. 组件内置丰富的数据探索与分析功能,从多角度挖掘数据价值,为您的可视化分析提供专业级支持。

    PixPin_2025-05-30_13-54-16

3. 注意事项

  1. 如果组件单独配置了属性,则该配置优先级将高于仪表板全局设置中的对应属性。

  2. 产品中使用的图表组件为ECharts组件,其提供了开放的自定义属性自定义行为,可定制出更丰富的视觉效果,下图是部分示例:

    image

  3. 示例文件包: 下载后,您可直接导入至对应版本系统中查看使用。

    E-Charts柱状图.zip

    注意: 本示例压缩包基于8.1版本制作,请使用8.1及以上版本并参照导入导出文档操作(低版本可能存在兼容性问题,建议升级)。