SunlightBarChart

轻量级柱状图组件，用于展示带柱状图的数据统计信息。轻量级柱状图组件，用于展示带柱状图的数据统计信息。

基本用法

单数据示例

单数据柱状图

<template>
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
    <h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">单数据柱状图</h3>
    <SunlightBarChart
      :data="singleBarData"
      :xAxisData="xAxisData"
      height="300px"
      :showLegend="false"
      :colors="['#409EFF']"
    />
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { SunlightBarChart } from 'sunlight-ui';
const singleBarData = ref([120, 200, 150, 80, 70, 110, 130]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日11"]);
</script>

隐藏源代码

多数据示例

多数据柱状图

<template>
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
    <h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">多数据柱状图</h3>
    <SunlightBarChart
      :data="multiBarData"
      :xAxisData="xAxisData"
      height="300px"
      :showLegend="true"
      :colors="['#409EFF', '#67c23a']"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightBarChart } from 'sunlight-ui';

// 多数据示例
const multiBarData = ref([
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130],
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35],
  },
]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
</script>

隐藏源代码

自定义样式

堆叠柱状图

<template>
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
    <h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">堆叠柱状图</h3>
    <SunlightBarChart
      :data="stackBarData"
      :xAxisData="['一月', '二月', '三月', '四月', '五月']"
      height="300px"
      :stack="true"
      :showLegend="true"
      :colors="['#E6A23C', '#67c23a']"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightBarChart } from 'sunlight-ui';

const stackBarData = ref([
  {
    name: "Q1",
    data: [20, 25, 30, 35, 40],
    stack: "total",
  },
  {
    name: "Q2",
    data: [30, 35, 40, 45, 50],
    stack: "total",
  },
]);
</script>
<style scoped>
.demo-container {
  padding: 20px;
  background-color: #F6F8FC;
  border-radius: 8px;
  margin-bottom: 20px;
}
</style>

隐藏源代码

渐变效果柱状图

<template>
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
    <h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">渐变效果柱状图</h3>
    <SunlightBarChart
      :data="singleBarData"
      :xAxisData="xAxisData"
      height="300px"
      :enableGradient="true"
      :showLegend="false"
      :colors="['#409EFF']"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightBarChart } from 'sunlight-ui';

// 单数据示例
const singleBarData = ref([120, 200, 150, 80, 70, 110, 130]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
</script>

隐藏源代码

多数据渐变柱状图

<template>
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
    <h3 style="margin-bottom: 20px; color: #666; font-size: 18px;">多数据渐变柱状图</h3>
    <SunlightBarChart
      :data="multiBarData"
      :xAxisData="xAxisData"
      height="300px"
      :showLegend="true"
      :enableGradient="true"
      :colors="['#409EFF', '#67c23a']"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightBarChart } from 'sunlight-ui';

// 多数据示例
const multiBarData = ref([
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130],
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35],
  },
]);
const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
</script>

隐藏源代码

<template>
  <div style="background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
    <SunlightBarChart
      :data="chartData"
      :xAxisData="xAxisData"
      height="300px"
      :showTitle="true"
      title="月度销售额"
      :titleStyle="{
        color: '#409EFF',
        fontSize: '16px',
        fontWeight: 'bold'
      }"
      :showLegend="false"
      :colors="['#409EFF']"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightBarChart } from 'sunlight-ui';
const chartData = ref([120, 200, 150, 80, 70, 110, 130]);
const xAxisData = ref(["一月", "二月", "三月", "四月", "五月", "六月", "七月"]);
</script>

隐藏源代码

组件属性

属性名	类型	默认值	说明
data	SingleBarData | BarDataItem[]	必填	图表数据，支持单系列数组或多系列对象数组
xAxisData	string[]	必填	X轴数据
height	string	'350px'	图表高度
colors	string[]	[]	颜色数组
barWidth	string | number	'40%'	柱宽
borderRadius	number | number[]	4	圆角半径
stack	boolean	false	是否堆叠
showLegend	boolean	false	是否显示图例
legendPosition	'bottom' | 'top' | 'left' | 'right'	'bottom'	图例位置
showTooltip	boolean	true	是否显示提示框
loading	boolean	false	是否加载中
showAxisLine	boolean	true	是否显示坐标轴线
showAxisLabel	boolean	true	是否显示坐标轴标签
showSplitLine	boolean	true	是否显示分割线
isEmpty	boolean	false	是否为空数据
enableGradient	boolean	false	是否开启渐变效果
title	string	''	图表标题
showTitle	boolean	false	是否显示标题
titlePosition	'left' | 'center' | 'right'	'center'	标题位置
titleStyle	object	{}	标题样式，支持 fontSize、fontWeight、color、padding 等属性

数据结构

单系列数据

const singleBarData = [120, 200, 150, 80, 70, 110, 130];

多系列数据

const multiBarData = [
  {
    name: "销售额",
    data: [120, 200, 150, 80, 70, 110, 130],
    color: "#5470C6",
    stack: "total",
    barWidth: "30%"
  },
  {
    name: "利润",
    data: [20, 50, 30, 15, 10, 25, 35],
    color: "#91CC75"
  }
];

组件说明

SunlightBarChart 是一个轻量级的柱状图组件，用于展示带柱状图的数据统计信息。它支持自定义统计数值、标题、变化率、时间范围、数据列表、卡片高度、图表颜色、柱状图宽度和柱状图圆角等内容，使数据展示更加直观和生动。

特点

• 支持单系列和多系列数据
• 支持堆叠柱状图
• 支持渐变色效果
• 支持自定义颜色、柱宽、圆角等样式
• 支持图例显示和位置调整
• 支持提示框、坐标轴、分割线等配置
• 响应式设计，适配不同屏幕尺寸

适用场景

• 数据统计和分析
• 业务指标监控
• 销售数据展示
• 业绩对比分析
• 趋势变化分析