EvolveUI

Appearance

EBarChart 组件 ​

组件简介 ​

  • 交互式柱状图组件，支持多数据系列显示。
  • 支持悬停高亮、点击交互、自定义工具提示。
  • 兼容单数据系列和多数据系列格式，支持图例显示。
  • 内置网格参考线、圆角柱状图、平滑动画效果。

基本用法 ​

qml
import "components" as Components

Components.ETheme { id: theme }

Components.EBarChart {
    width: 600
    height: 500

    title: "Bar Chart"
    subtitle: "数据统计概览"

    // 多系列数据
    dataSeries: [
        {
            name: "Sales",
            color: theme.focusColor,
            data: [
                {label: "Jan", value: 120},
                {label: "Feb", value: 180}, 
                {label: "Mar", value: 237},
                {label: "Apr", value: 160},
                {label: "May", value: 90},
                {label: "Jun", value: 200}
            ]
        }
    ]

    onPointClicked: (seriesIndex, dataIndex, dataPoint) => 
        console.log("点击:", seriesIndex, dataIndex, dataPoint.label, dataPoint.value)
    onPointHovered: (seriesIndex, dataIndex, dataPoint) => 
        console.log("悬停:", seriesIndex, dataIndex, dataPoint.label)
}

属性列表 ​

属性名类型默认值描述
titlestring"Bar Chart"图表标题
subtitlestring"数据统计概览"副标题
dataSeriesvar[{ name, color, data: [{label,value}] }]多系列数据
dataPointsvar[]简化数据（单系列），元素为 {label,value}
barColorcolortheme.focusColor默认柱状图颜色
tooltipColorcolortheme.primaryColor工具提示背景色
tooltipTextColorcolortheme.textColor工具提示文字颜色
hoveredSeriesIndexint-1当前悬停的数据系列索引
hoveredDataIndexint-1当前悬停的数据点索引
backgroundVisiblebooltrue是否显示背景
radiusreal20外层圆角半径
fontSizeint14文本像素大小
titleFontSizeint18标题字体大小
subtitleFontSizeint12副标题字体大小
backgroundColorcolortheme.secondaryColor背景颜色
textColorcolortheme.textColor文本颜色
subtitleColorcolorQt.darker(theme.textColor, 1.5)副标题颜色
shadowEnabledbooltrue是否启用阴影
shadowColorcolortheme.shadowColor阴影颜色
chartPaddingint20图表内边距
topPaddingint90上边距（标题区域）
barSpacingreal0.2柱状图间距比例 (0-1)
groupSpacingreal0.3组间距比例 (0-1)
maxValuereal自动计算数据最大值（自动计算）
chartWidthreal自动计算图表宽度（自动计算）
chartHeightreal自动计算图表高度（自动计算）

信号列表 ​

信号名参数描述
pointClicked(int, int, var)seriesIndex, dataIndex, dataPoint点击某数据点时触发
pointHovered(int, int, var)seriesIndex, dataIndex, dataPoint悬停于某数据点时触发

扩展示例 ​

单系列数据（兼容模式） ​

qml
Components.EBarChart {
    width: 600
    height: 400
    
    // 使用旧格式 - 单系列数据
    dataPoints: [
        {label: "Q1", value: 150},
        {label: "Q2", value: 230},
        {label: "Q3", value: 180},
        {label: "Q4", value: 290}
    ]
    
    barColor: "#4CAF50"
}

多系列柱状图 ​

qml
Components.EBarChart {
    width: 700
    height: 500
    
    title: "销售对比"
    subtitle: "各产品季度销售数据"
    
    dataSeries: [
        {
            name: "产品A",
            color: "#FF6384",
            data: [
                {label: "Q1", value: 120},
                {label: "Q2", value: 150},
                {label: "Q3", value: 180},
                {label: "Q4", value: 200}
            ]
        },
        {
            name: "产品B", 
            color: "#36A2EB",
            data: [
                {label: "Q1", value: 80},
                {label: "Q2", value: 110},
                {label: "Q3", value: 140},
                {label: "Q4", value: 170}
            ]
        },
        {
            name: "产品C",
            color: "#FFCE56",
            data: [
                {label: "Q1", value: 60},
                {label: "Q2", value: 90},
                {label: "Q3", value: 120},
                {label: "Q4", value: 150}
            ]
        }
    ]
}

自定义样式和交互 ​

qml
Components.EBarChart {
    width: 600
    height: 450
    
    title: "用户增长"
    subtitle: "月度新增用户数统计"
    
    backgroundColor: "#f5f5f5"
    textColor: "#333"
    barColor: "#4BC0C0"
    tooltipColor: "#333"
    tooltipTextColor: "white"
    
    barSpacing: 0.3  // 增加柱子间距
    groupSpacing: 0.4  // 增加组间距
    
    onPointClicked: (seriesIndex, dataIndex, dataPoint) => {
        console.log(`点击了 ${dataPoint.label}: ${dataPoint.value}`)
        // 可以在这里添加更多交互逻辑
    }
    
    dataPoints: [
        {label: "1月", value: 1200},
        {label: "2月", value: 1800},
        {label: "3月", value: 2370},
        {label: "4月", value: 1600},
        {label: "5月", value: 900},
        {label: "6月", value: 2000}
    ]
}

无背景简洁样式 ​

qml
Components.EBarChart {
    width: 500
    height: 350
    
    title: "简洁图表"
    subtitle: "最小化设计"
    
    backgroundVisible: false
    shadowEnabled: false
    
    dataPoints: [
        {label: "A", value: 45},
        {label: "B", value: 78},
        {label: "C", value: 32},
        {label: "D", value: 91}
    ]
}

注意事项 ​

  • X 轴标签来自数据的 label 字段，各系列应共享相同的数据点数量和顺序。
  • 多系列数据时会自动显示图例，单系列数据时图例隐藏。
  • 柱状图支持圆角设计，自动根据柱子宽度调整圆角半径。
  • 工具提示位置会自动调整以避免超出图表边界。
  • 悬停效果通过改变柱子透明度实现，提供更好的视觉反馈。
  • 数据格式兼容性强，支持新旧两种数据格式无缝切换。