DualBarCompareChart 双柱对比图

DualBarCompareChart 双柱对比图 的基础用法、公开 API 与示例。

基础示例

使用正向与负向数据展示计划和实际值对比。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { DualBarCompareChart } from "@/components/chart/dual-bar-compare-chart";

const demoProps = {
  height: "260px",
  xAxisData: ["材料", "人工", "设备", "管理费"],
  positiveName: "计划",
  negativeName: "实际",
  positiveData: [12, 16, 9, 6],
  negativeData: [10, 18, 11, 8],
  showLegend: true,
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DualBarCompareChart v-bind="demoProps"></DualBarCompareChart>
    </div>
  </ClientOnly>
</template>

隐藏源代码

显示图例和数据标签

开启图例、数据标签和坐标轴辅助线，适合需要读数对比的业务看板。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { DualBarCompareChart } from "@/components/chart/dual-bar-compare-chart";

const demoProps = {
  height: "300px",
  xAxisData: ["一月", "二月", "三月", "四月"],
  positiveName: "计划成本",
  negativeName: "实际成本",
  positiveData: [42, 36, 48, 52],
  negativeData: [38, 44, 45, 49],
  showLegend: true,
  showDataLabel: true,
  showAxisLine: true,
  showSplitLine: true,
  yAxisMin: -60,
  yAxisMax: 60,
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <DualBarCompareChart v-bind="demoProps" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { DualBarCompareChart } from "@/components/chart/dual-bar-compare-chart";

Props

参数	说明	类型	默认值	必填
height	图表高度	string	DEFAULT_CHART_HEIGHT	否
loading	是否加载中	boolean	false	否
isEmpty	是否为空数据	boolean	false	否
colors	颜色配置	string[]	-	否
showAxisLabel	是否显示坐标轴标签	boolean	true	否
showAxisLine	是否显示坐标轴线	boolean	false	否
showSplitLine	是否显示分割线	boolean	false	否
showTooltip	是否显示提示框	boolean	true	否
showLegend	是否显示图例	boolean	false	否
legendPosition	图例位置	LegendPosition	"bottom"	否
legendOptions	自定义图例配置，会与默认配置合并	ChartCustomOptions	-	否
positiveData	正向数据	number[]	[]	否
negativeData	负向数据	number[]	[]	否
xAxisData	X 轴标签数据	string[]	[]	否
positiveName	正向数据名称	string	"正向数据"	否
negativeName	负向数据名称	string	"负向数据"	否
barWidth	柱状图宽度	string | number	16	否
yAxisMin	Y 轴最小值	number	-100	否
yAxisMax	Y 轴最大值	number	100	否
showDataLabel	是否显示数据标签	boolean	false	否
positiveBorderRadius	正向数据圆角配置	number | number[]	[10, 10, 0, 0]	否
negativeBorderRadius	负向数据圆角配置	number | number[]	[0, 0, 10, 10]	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
-	该组件未声明 Expose。	-

Module API

名称	说明	类型
DualBarCompareChart	导出 DualBarCompareChart 供业务侧复用。	useInstall(index)

Types

BidirectionalBarChartProps

双向堆叠柱状图 Props

字段	说明	类型	默认值	必填
height	图表高度	string	-	否
loading	是否加载中	boolean	-	否
isEmpty	是否为空数据	boolean	-	否
colors	颜色配置	string[]	-	否
showAxisLabel	是否显示坐标轴标签	boolean	-	否
showAxisLine	是否显示坐标轴线	boolean	-	否
showSplitLine	是否显示分割线	boolean	-	否
showTooltip	是否显示提示框	boolean	-	否
showLegend	是否显示图例	boolean	-	否
legendPosition	图例位置	LegendPosition	-	否
legendOptions	自定义图例配置，会与默认配置合并	ChartCustomOptions	-	否
positiveData	正向数据	number[]	-	是
negativeData	负向数据	number[]	-	是
xAxisData	X 轴标签数据	string[]	-	否
positiveName	正向数据名称	string	-	否
negativeName	负向数据名称	string	-	否
barWidth	柱状图宽度	string | number	-	否
yAxisMin	Y 轴最小值	number	-	否
yAxisMax	Y 轴最大值	number	-	否
showDataLabel	是否显示数据标签	boolean	-	否
positiveBorderRadius	正向数据圆角配置	number | number[]	-	否
negativeBorderRadius	负向数据圆角配置	number | number[]	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。