文档

Appearance

页面模块内变量命名规范 ​

版本说明 ​

时间修改人备注
2025-05-06YG初始化文档

1. 模块命名规范 ​

1.1 文件命名 ​

  • 使用 camelCase 命名法
  • 以功能类型为前缀，如 chart + 图表类型
  • 例如： chartBar.js 、 chartLine.js 、 chartPie.js 等

1.2 模块结构 ​

  • 每个模块应包含 state、mutations、getters 三个主要部分
  • 导出为默认对象

2. 状态(State)命名规范 ​

2.1 主配置对象 ​

  • 使用 [类型]Config 形式命名主配置对象
  • 例如： barConfig 、 lineConfig 、 pieConfig 等

2.2 配置属性 ​

  • 使用 chart + 功能模块名称
  • 例如： chartQuery 、 chartBar 、 chartLegend 等

3. 功能模块分类 ​

根据 chartBar.js 的结构，可将变量按以下模块分类：

3.1 基础信息 ​

js
    chartType: 'bar',           // 图表类型
    id: genUUID(),              // 唯一标识

3.2 查询分析设置 (chartQuery) ​

js
chartQuery: {
    xAxisKey: '', // x轴字段
    xAxisConcatKeys: [], // 组合显示字段
    yAxisKeys: [], // y轴字段
    classifyField: '', // 分类列
}

3.3 柱设置 (chartBar) ​

js
chartBar: {
    orientation: "vertical", // 方向 vertical-垂直 horizontal-水平
    groupWidth: 0.7, // 分组宽度
    barWidth: 0.9, // 柱宽度
    rotateAngle: 0, // 转动角度(°)
    isStacking: 0, // 是否堆叠 0-否 1-是
    showValues: 'never', // 显示值 auto-自动 forever-永远 never-从不
    labelLocation: "xAxis", // 标签位置 xAxis-x轴 inside-内部
    valueSize: 12, // 值字体大小
    borderWidth: 1, // 线宽
    fillOpacity: 85, // 透明度
    gradientMode: 'none', // 渐变方式 opacity-透明度 none-不渐变
}

3.4 图例设置 (chartLegend) ​

js
chartLegend: {
    show: true, // 显示图例
    sortMethod: 'none', // 排序方式 none-不排序 asc-升序 desc-降序
    position: 'right', // 图例位置 top-上边 right-右边 bottom-下边 left-左边
    actionMode: 'toggle', // 动作行为 single-单选 toggle-切换
    maxContent: 20, // 最大宽度（高度）%
}

3.5 Tooltip配置 (chartTooltip) ​

js
chartTooltip: {
    sortMethod: 'none', // 排序方式 none-不排序 asc-升序 desc-降序
    mode: 'all',  // 显示模式 all-所有 single-单个
}

3.6 x轴设置 (chartX) ​

js
chartX: {
    show: true, // 显示x轴
    label: '', // x轴标题
    height: 'auto', // x轴高度
}

3.7 y轴设置 (chartY) ​

js
chartY: {
    show: true, // 显示y轴
    label: '', // y轴标题
    position: 'left', // y轴位置 left-左边 right-右边
    // isStacking: 0, // 是否堆叠 0-否 1-是
    width: 'auto', // y轴宽度
    max: 'dataMax', // 最大值
    min: 'dataMin', // 最小值
    softMax: 'auto', // 弹性最大值 (当所有值比弹性最大值小时，弹性最大值才会生效)
    softMin: 'auto', // 弹性最小值 (当所有值比弹性最小值大时，弹性最小值才会生效)
    id: 'auto', // y轴id (用于定义多y轴，y轴id是任意字符串，不同id的y轴在图像上会画出不同的y轴。y轴id优先级高于标准配置中的格式化和单位。)
}

4. 变量命名规则 ​

4.1 布尔类型变量 ​

  • 使用 is 或 show 前缀
  • 例如： isStacking 、 show

4.2 枚举类型变量 ​

  • 使用描述性名称
  • 注释中列出可选值
  • 例如： orientation: "vertical" // 方向 vertical-垂直 horizontal-水平

4.3 数值类型变量 ​

  • 直接使用描述性名称
  • 可在注释中说明单位
  • 例如： rotateAngle: 0 // 转动角度(°)

4.4 字符串类型变量 ​

  • 使用描述性名称
  • 例如： label 、 position

4.5 数组类型变量 ​

  • 使用复数形式
  • 例如： xAxisConcatKeys 、 yAxisKeys

5. Getters 命名规范 ​

  • 使用 get + 配置名称
  • 例如： getBarConfig 、 getBarSetting 、 getBarSearch

6. Mutations 命名规范 ​

  • 使用 camelCase 命名法
  • 动作 + 对象格式
  • 例如： setChartMapping 、 setChartSetting

7. 注释规范 ​

  • 每个配置项后添加简短注释说明用途
  • 对于枚举类型，在注释中列出所有可选值
  • 对于特殊配置，添加详细说明

8. 完整示例 ​

js
// chartBar.js 图表-柱状图配置
import { deepCopy, genUUID } from '@/libs/utils.js';
import general from './general';

export default {
    state: {
        barConfig: {
            chartType: 'bar',
            id: genUUID(),
            chartStatement: general.state.chartStatement,
            ...deepCopy(general.state.generalOptions),
            // 查询分析设置
            chartQuery: {
                xAxisKey: '', // x轴字段
                xAxisConcatKeys: [], // 组合显示字段
                yAxisKeys: [], // y轴字段
                classifyField: '', // 分类列
            },
            // 柱设置
            chartBar: {
                orientation: "vertical", // 方向 vertical-垂直 horizontal-水平
                groupWidth: 0.7, // 分组宽度
                barWidth: 0.9, // 柱宽度
                rotateAngle: 0, // 转动角度(°)
                isStacking: 0, // 是否堆叠 0-否 1-是
                showValues: 'never', // 显示值 auto-自动 forever-永远 never-从不
                labelLocation: "xAxis", // 标签位置 xAxis-x轴 inside-内部
                valueSize: 12, // 值字体大小
                borderWidth: 1, // 线宽
                fillOpacity: 85, // 透明度
                gradientMode: 'none', // 渐变方式 opacity-透明度 none-不渐变
            },
            // 图例配置
            chartLegend: {
                show: true, // 显示图例
                sortMethod: 'none', // 排序方式 none-不排序 asc-升序 desc-降序
                position: 'right', // 图例位置 top-上边 right-右边 bottom-下边 left-左边
                actionMode: 'toggle', // 动作行为 single-单选 toggle-切换
                maxContent: 20, // 最大宽度（高度）%
            },
            // Tooltip配置
            chartTooltip: {
                sortMethod: 'none', // 排序方式 none-不排序 asc-升序 desc-降序
                mode: 'all',  // 显示模式 all-所有 single-单个
            },
            // x轴
            chartX: {
                show: true, // 显示x轴
                label: '', // x轴标题
                height: 'auto', // x轴高度
            },
            // y轴
            chartY: {
                show: true, // 显示y轴
                label: '', // y轴标题
                position: 'left', // y轴位置 left-左边 right-右边
                // isStacking: 0, // 是否堆叠 0-否 1-是
                width: 'auto', // y轴宽度
                max: 'dataMax', // 最大值
                min: 'dataMin', // 最小值
                softMax: 'auto', // 弹性最大值 (当所有值比弹性最大值小时，弹性最大值才会生效)
                softMin: 'auto', // 弹性最小值 (当所有值比弹性最小值大时，弹性最小值才会生效)
                id: 'auto', // y轴id (用于定义多y轴，y轴id是任意字符串，不同id的y轴在图像上会画出不同的y轴。y轴id优先级高于标准配置中的格式化和单位。)
            },
        }
    },
    mutations: {

    },
    getters: {
        getBarConfig(state) {
            return state.barConfig;
        },
        getBarSetting(state) {
            // return state.barConfig.setting;
            return state.barConfig;
        },
        getBarSearch(state) {
            return state.barConfig.chartStatement;
        },
    }
}