SunlightLevelChart

水平柱状图组件，支持多组数据的水平展示，适用于展示各类别数据的横向对比。

基本用法

基础水平柱状图

基础水平柱状图

<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>
    <SunlightLevelChart
      :data="basicData"
      :xAxisData="xAxisData"
      height="300px"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { SunlightLevelChart } from 'sunlight-ui';
const basicData = ref([120, 200, 150, 80, 70, 110, 130]);
const xAxisData = ref(['类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7']);
</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>
    <SunlightLevelChart
      :data="multiData"
      :xAxisData="xAxisData"
      height="300px"
      :showLegend="true"
      :colors="['#409EFF', '#67C23A']"
    />
  </div>
</template>

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

const multiData = ref([
  {
    name: '系列1',
    data: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    name: '系列2',
    data: [80, 150, 120, 50, 40, 80, 90]
  }
]);
const xAxisData = ref(['类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7']);
</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>
    <SunlightLevelChart
      :data="stackData"
      :xAxisData="xAxisData"
      height="300px"
      :stack="true"
      :showLegend="true"
      :colors="['#E6A23C', '#F56C6C']"
    />
  </div>
</template>

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

const stackData = ref([
  {
    name: '部分1',
    data: [60, 100, 75, 40, 35, 55, 65]
  },
  {
    name: '部分2',
    data: [60, 100, 75, 40, 35, 55, 65]
  }
]);
const xAxisData = ref(['类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7']);
</script>

隐藏源代码

带标题的水平柱状图

<template>
  <div class="demo-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="24">
        <div style="background-color: #ffffff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);">
          <SunlightLevelChart
            :data="multiHBarData"
            :x-axis-data="hBarXAxisData"
            height="300px"
            :show-title="true"
            title="产品销量对比"
            title-position="center"
            :title-style="{
              fontSize: 18,
              fontWeight: 'bold',
              color: '#333'
            }"
            :show-legend="true"
            :colors="['#FF6B6B', '#4ECDC4']"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

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

const multiHBarData = [
  {
    name: '系列1',
    data: [120, 200, 150, 80, 70, 110, 130]
  },
  {
    name: '系列2',
    data: [80, 150, 120, 50, 40, 80, 90]
  }
];

// X轴数据
const hBarXAxisData = ['类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7'];
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

</style>

隐藏源代码

组件属性

属性名	类型	默认值	说明
data	SingleBarData | BarSeriesItem[]	必填	支持单系列和多系列数据
xAxisData	string[]	必填	X轴数据数组
height	string	'350px'	图表高度
barWidth	string | number	'36%'	柱状图宽度
stack	boolean	false	是否堆叠
colors	string[]	['#4C87F3', '#8BD8FC', '#43A047', '#FB8C00', '#E53935']	颜色配置数组
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	是否为空数据
title	string	''	图表标题
showTitle	boolean	false	是否显示标题
titlePosition	'left' | 'center' | 'right'	'center'	标题位置
titleStyle	object	{}	标题样式

组件说明

SunlightLevelChart 是一个水平柱状图组件，支持多组数据的水平展示，适用于展示各类别数据的横向对比。