10分钟配置出常用的数据可视化混合图图表（柱线、多Y轴混合）

在数据可视化领域，混合图图表是常见的图表，可以多维度的展示复杂数据关系。通过整合柱状图和折线图的互补优势，或通过多维度Y轴实现多指标对比，混合图表能够直观呈现数据背后的趋势、差异与关联，为决策提供有力支撑。

混合图图表有很多种类型，其中柱线混合图、多Y轴混合图是常见的其中之一。

1. 柱线混合图

• 核心组合：柱状图 + 折线图
• 特点：柱状图展示分类数据的对比（如销售额、产品类别），折线图反映趋势变化（如时间序列数据）。适用场景：需同时强调数据差异与趋势分析，如“月度销售目标完成率”中，柱状图显示实际销售额，折线图标注目标线。
• 变体：折线+堆叠柱状图：展示数据累积效果，如“各部门成本构成”。折线+分组柱状图：对比多组数据差异，如“不同区域季度销售额”。

2. 多Y轴混合图

• 核心组合：柱状图/折线图 + 多个Y轴
• 特点：每个数据系列对应独立Y轴，解决不同量纲或数量级数据的共存问题（如“温度与降水量”）。适用场景：需对比差异悬殊的指标，如“用户增长量（万级）与转化率（百分比）”。

样式配置

在JVS-智能BI中，提供了这些混合图图表组件。今天我详细说一下具体是如何配置的。

进入到可视化图表设计中，点击选择柱线混合图

选择后点击【样式】内的【自定义样式】。看到大致分为【图表设置】、【标题设置】、【X轴】、【Y轴】、【目标线】、【图例设置】、【组件外观】这几个大的模块。今天主要讲讲图表独有的样式设置。

图表设置

点开【配色方案】，可选择该条形图组件的主题颜色以及是否开启渐变。

图形配置，主要是对混合图的柱状图以及折线图的分别配置。柱状图配置主要有柱体样式、背景、宽度、间距、描边以及圆角的样式设置。折线图的相关配置则主要有折线线条风格、线条样式、线条宽度、标记点及其样式、阴影以及显示面积的样式设置。以下为具体配置方式。

柱体样式即不同呈现展示效果，根据不同的选择给到不同的样式。

柱体宽即见名知意，即是柱体的宽度调整。值越大则越宽。柱体间距是发生在同组数据里面的相邻间距调整。

柱体圆角即是给柱体的四个边角设置圆弧，圆弧的弧度取决于设置的圆角大小。柱体圆角越大，则设置的圆弧弧度越圆。

描边就是给柱状图的每个柱体进行描边处理，可定义描边样式、颜色以及粗细。柱子背景即是未填充的柱子部分背景颜色。

折线线条风格、线条样式、线条宽度样式的话即是对线条方面不同样子的一个呈现方式，可根据实际选择自己想要的样式。其中线条风格可分为折线和曲线，线条样式有实线虚线等。以下为配置详情。

【标记点】即为折线图上的每个拐点，可设置标记点形状，默认形状为实心圆。可按自己喜好进行调整标记点的形状和大小。

【阴影】即是该折线的阴影设置，可调节阴影的x、y轴的偏移量来实现阴影和原折线不重叠。模糊度越大即阴影显示越不明显。

【显示数据】一般用于你数据集选择后，字段和维度的展示。打开显示数据后，可定义数据显示的文字大小颜色、粗细、斜体、上下边距。

显示位置可定义显示数据在每个柱状的什么位置，可分为内部居中、顶部、内部顶部、内部底部四种。现在分别展示四种方式最后的效果。

启用迷你图，即是缩去x和y轴的图例，让图更加清晰放大。直接看下图展示即可。

数据缩放即下方会出现一个缩放条，可根据此条自由缩放展示的数据。

开启提示信息的话，开启后当鼠标经过到折线图上的某一块儿时，那么就会显示出该块儿的信息提示。

x轴和y轴设置是一样的，区别就是一个为横轴一个为纵轴。这里描述一下x轴的样式相关配置，y轴进行类比即可。

我们点开x轴，可以看到轴标签可设置轴标签的文字大小、颜色、粗细、斜体等。还可定义其标签的倾斜角度。

显示轴线即轴标签和柱状图之间的分界线，为让轴线显示更加明显看得更加清晰。这边使用显眼颜色并加宽字体大小以供展示效果。

显示网格线即是x轴的网格线，勾选后可定义网格线的线条、粗细以及颜色。这里用显眼的黑色加以区分，以看到实际效果。

【目标线】即添加一条目标线，用于用户更方便查看那些数据达成目标。点开目标线，选择添加目标线。

添加目标线，需给出目标线名称、定义目标线种类（可分为自定义、平均值、最大值、最小值）、目标线样式、颜色、大小。以及目标线显示内容是数值还是名称还是名称+数值，同时亦可设置文本标签的大小、样式和颜色。以及文本标签所处的位置是在线的开始顶部、底部、还是居中或末尾顶部或底部。

在线demo：http://bi.bctools.cn

gitee地址：https://gitee.com/software-minister/jvs-bi