vue-analysis-table

表格组件

默认已表格形式展示数据，支持切换到图分析模式。

部署

使用内网源：npm set registry http://npm.vivo.com.cn/

• 修改版本 (TODO 自动化)
• yarn build
• npm publish

参数说明

除了 data columns，其它参数都可缺省

分为以下三部分:

1. 组件参数

Property	Description	Type	Default
data	表格数据	-	-
columns	表头设置	Array<TableColumn>	-
defaultType	默认展示模式	DISPLAY_TYPE	DISPLAY_TYPE.表
showSwitch	是否显示切换图/表按钮	boolean	true
title	表格 title	string	'详情列表'

enum DISPLAY_TYPE {
  '表' = 'table',
  '图' = 'chart',
}

export interface TableColumn {
  key: string;
  name?: string;
  isNumber?: boolean; // 数字类型会靠右
  _show?: boolean;
  width?: string;
  overflowTooltip?: boolean;
  fixed?: 'right' | 'left' | true; // 出现横向滚动条的时候是否固定
}

2. 表相关参数

常用的参数: defaultSortKey defaultSortDirection expandKeys filterFields showOverflowTooltip

Property	Description	Type	Default
defaultSortKey	排序字段	string	''
defaultSortDirection	排序方向	'ascend' or 'descend'	'descend'
expandKeys	需要支持展开的字段	ExpandColumnSettings	{}
filterFields	筛选框的字段	Array<string | FilterConfig>	[]
showOverflowTooltip	超过一行不换行，而是用省略号显示	boolean	false
showSeniorFilter	是否显示高级筛选	boolean	true
showSearch	是否显示搜索框	boolean	true
showIndex	是否显示 index	boolean	true
indexWidth	第一列 index 宽度	number	50
detectNumber	是否自动检测 number 字段,number 字段靠右显示	boolean	true
defaultPageIndex	分页默认值	number	1
defaultPageSize	页码默认值	number	10
defaultPageIndex	页码选项可选值	number	PAGE_SIZE_OPTIONS
showColumnsSetting	是否显示表头设置(控制显示哪些表头)	boolean	true
defaultHiddenColumns	默认隐藏的字段	Array<string>	[]
showExport	是否显示导出按钮	boolean	true
exportTitle	导出表格名称	string	'导出数据'
tableClickCopy	是否支持点击单元格复制	boolean	true

export interface FilterConfig {
  key: string;
  label?: string;
  multiple?: boolean;
  defaultValue?: any;
  preKeys?: string[];
}

interface ExpandColumnSettings {
  [key: string]: number; // 超过多少行才显示展开按钮
}

3. 图相关参数

常用的参数: timeField timeProps defaultValues options

比较难理解的是 defaultValues options。

• series: 分析维度字段
• dimension: 时间字段
• measure: 指标字段，有的数据可能缺少指标字段，默认使用次数

defaultValues

定义三个维度的默认值： 示例:

{ series: 'sysver', dimension: '_day' }

分析维度选择框默认选中 sysver 时间字段默认选择_day

options

定义三个维度的可选值： 示例:

options: {
    series: {
      sysver: '版本',
      split_module: '模块',
      android_version: '安卓版本',
      sysversion: '软件版本号',
      data_source: '数据源',
      externalModelName: '机型',
    },
    dimensions: { _day: '反馈日期' },
  },

指定分析维度的可选项只有这 6 个字段，时间字段只能选择_day

Property	Description	Type	Default
timeField	指定时间字段	string	true
timeProps	补充的时间字段,配合 timeField 字段	TimeProps	true
defaultValues	维度设置默认值	CubeSettings	{}
options	维度可选值，不传的话用字段聚合结果	PassedInCubeOptions	true
showSeriesSelection	是否显示分析维度选择框	boolean	true
showDimensionSelection	是否显示时间字段选择框	boolean	true
showMeasureSelection	是否显示指标选择框	boolean	true
chartHeight	图高度	string	350
chart1Width	左图宽度	string	500
chart1Limit	左图高度 Top 数量	number	10
defaultChart1Type	左图显示模式	'pie' | 'bar'	'bar'
showSwitchChart1	是否显示作图模式切换按钮	boolean	true
showSkipWeek	是否显示跳过周末选项(必须有 timeField)	boolean	true
showSkipHoliday	是否显示显示跳过节假日(必须有 timeField)	boolean	true

export interface CubeSettings<T> {
  dimension?: keyof T | UnwrapRef<keyof T>;
  series?: keyof T | UnwrapRef<keyof T>;
  measure?: keyof T | UnwrapRef<keyof T> | CountField;
}

export interface PassedInCubeOptions {
  dimensions?: Record<string, string>;
  series?: Record<string, string>;
  measures?: Record<string, string>;
}

export interface TimeProps {
  year?: string;
  month?: string;
  week?: string;
  day?: string;
  hour?: string;
}
// 例如:
const timeProps = { day: '反馈日期', week: '反馈周', month: '反馈月' };

示例参数

// 表格数据源
const data = [{
    {
    externalModelName: 'X9s',
    product: 'PD1616BA',
    feedback_time: '2021-04-16T00:08:46',
    split_module: '其他',
    sysver: '',
    description: '打不开',
    android_version: '',
    sysversion: '',
    imei: '867821032381965',
    telephone: '',
    data_source: 'faq',
    log_path: '',
  },
}]

const props = {
  showSwitch: 'true',
  defaultType: 'table',
  filterFields: [
    { key: 'externalModelName', multiple: true, defaultValue: [] },
    { key: 'sysver', multiple: true },
    { key: 'data_source', multiple: true },
  ],
  defaultSortKey: 'feedback_time',
  defaultSortDirection: 'descend',
  // description字段超过两行显示展开按钮
  expandKeys: { description: 2 },

  // 下面是图的设置
  // 没有指标字段会默认用次数
  showMeasureSelection: 'false',
  showSeriesSelection: 'true',
  showDimensionSelection: 'true',
  // 分析维度选择框默认选中 sysver  时间字段默认选择_day
  defaultValues: { series: 'sysver', dimension: '_day' },
  // 表格数据时间字段是feedback_time
  timeField: 'feedback_time',
  // 根据feedback_time字段补充天周月时间维度
  timeProps: { day: '反馈日期', week: '反馈周', month: '反馈月' },
  options: {
    series: {
      sysver: '版本',
      split_module: '模块',
      android_version: '安卓版本',
      sysversion: '软件版本号',
      data_source: '数据源',
      externalModelName: '机型',
    },
    dimensions: { _day: '反馈日期' },
  },
};