EvolveUI

Appearance

EAreaChart 组件 ​

组件简介 ​

EAreaChart 是一个折线图组件，用于可视化数据趋势和变化。它支持自定义样式、数据点标记和动画效果，适合构建数据分析和监控界面。

基本用法 ​

qml
import "components" as Components

Components.ETheme { id: theme }

Components.EAreaChart {
    width: 400
    height: 300
    data: [
        { x: 0, y: 50 },
        { x: 1, y: 75 },
        { x: 2, y: 30 },
        { x: 3, y: 80 },
        { x: 4, y: 60 },
        { x: 5, y: 90 },
        { x: 6, y: 40 }
    ]
}

属性列表 ​

属性名类型默认值描述
datavariant[]图表数据数组，每个元素包含 x 和 y 属性
xLabelstring"X"X轴标签
yLabelstring"Y"Y轴标签
titlestring""图表标题
showGridbooltrue是否显示网格线
showAxesbooltrue是否显示坐标轴
showDataPointsbooltrue是否显示数据点
showAreabooltrue是否显示填充区域
showLegendboolfalse是否显示图例
animatedbooltrue是否启用动画效果
animationDurationint1000动画持续时间（毫秒）
lineColorcolortheme.primaryColor线条颜色
areaColorcolortheme.primaryColor填充区域颜色
areaOpacityreal0.3填充区域透明度
dataPointColorcolortheme.primaryColor数据点颜色
gridColorcolortheme.borderColor网格线颜色
axisColorcolortheme.textColor坐标轴颜色
textColorcolortheme.textColor文本颜色
backgroundColorcolortheme.surfaceColor背景颜色
borderRadiusreal8圆角半径

方法列表 ​

方法名参数返回值描述
setData(data)variant无设置图表数据
addDataPoint(x, y)real, real无添加单个数据点
clearData()无无清除所有数据
update()无无更新图表显示

信号列表 ​

信号名参数描述
dataPointClicked(index, dataPoint)int, variant数据点被点击时触发
dataChanged()无数据改变时触发

扩展示例 ​

多组数据的面积图 ​

qml
Components.EAreaChart {
    width: 400
    height: 300
    title: "多组数据趋势"
    showLegend: true
    
    data: [
        {
            name: "数据组 1",
            points: [
                { x: 0, y: 50 },
                { x: 1, y: 75 },
                { x: 2, y: 30 },
                { x: 3, y: 80 },
                { x: 4, y: 60 }
            ],
            lineColor: theme.primaryColor,
            areaColor: theme.primaryColor
        },
        {
            name: "数据组 2",
            points: [
                { x: 0, y: 30 },
                { x: 1, y: 45 },
                { x: 2, y: 60 },
                { x: 3, y: 40 },
                { x: 4, y: 70 }
            ],
            lineColor: theme.secondaryColor,
            areaColor: theme.secondaryColor
        }
    ]
}

自定义样式的面积图 ​

qml
Components.EAreaChart {
    width: 400
    height: 300
    title: "自定义样式图表"
    lineColor: "#ff4081"
    areaColor: "#ff4081"
    areaOpacity: 0.2
    dataPointColor: "#ff4081"
    gridColor: "#e0e0e0"
    axisColor: "#666666"
    textColor: "#333333"
    backgroundColor: "#f5f5f5"
    borderRadius: 12
    
    data: [
        { x: 0, y: 50 },
        { x: 1, y: 75 },
        { x: 2, y: 30 },
        { x: 3, y: 80 },
        { x: 4, y: 60 },
        { x: 5, y: 90 },
        { x: 6, y: 40 }
    ]
}

带有交互的数据图表 ​

qml
Components.EAnimatedWindow {
    width: 450
    height: 350
    title: "交互式数据图表"
    visible: true
    
    Column {
        anchors.fill: parent
        padding: 20
        spacing: 16
        
        Text {
            text: "数据趋势分析"
            font.pointSize: 20
            font.bold: true
            color: theme.textColor
            anchors.horizontalCenter: parent.horizontalCenter
        }
        
        Components.EAreaChart {
            width: 410
            height: 250
            data: [
                { x: 0, y: 50 },
                { x: 1, y: 75 },
                { x: 2, y: 30 },
                { x: 3, y: 80 },
                { x: 4, y: 60 },
                { x: 5, y: 90 },
                { x: 6, y: 40 }
            ]
            onDataPointClicked: (index, dataPoint) => {
                console.log("点击的数据点:", index, dataPoint)
                dataPointLabel.text = "数据点 " + index + ": x=" + dataPoint.x + ", y=" + dataPoint.y
            }
        }
        
        Text {
            id: dataPointLabel
            text: "点击数据点查看详细信息"
            color: theme.textSecondaryColor
            anchors.horizontalCenter: parent.horizontalCenter
        }
    }
}

最佳实践 ​

  1. 数据格式：确保数据点的 x 和 y 值格式正确，且数据点数量适中
  2. 颜色选择：为多组数据选择对比鲜明的颜色，提高可读性
  3. 标签设置：设置清晰的坐标轴标签和图表标题，帮助用户理解数据
  4. 交互设计：为数据点添加点击事件，提供更详细的数据信息
  5. 性能优化：对于大量数据点，考虑关闭动画效果和数据点显示

注意事项 ​

  • 图表数据应按 x 值从小到大排序
  • 填充区域的透明度建议设置在 0.2-0.5 之间，提高可读性
  • 多组数据时，每组数据应包含 name 属性用于图例显示
  • 图表支持触摸和鼠标点击交互
  • 动画效果可能会影响性能，对于大量数据点建议关闭动画