Chart

图表和看板，用来对结构化数据进行可视化，以呈现更为清晰且易于理解的数据指标。

示例

注意：Chart组件既可作为页面使用，也可作为单独的组件使用。大屏和看板的区别是看板没有筛选工具栏，且右上角的按钮能链接到大屏。

Show Code

注意：Chart的Actions仅可使用`Common.historyPush`和`Common.historyBack`。

Props

type ChartComponent = 'numberCard' | 'table' | 'line' | 'bar' | 'lineBar' | 'map' | 'pie'

interface IProps {
    // 页面标题
    name: string
    // 版本
    version?: string
    // 页面描述
    description?: string
    // 参考 Yao 关于 Node 的定义
    nodes: Array<Node>
    // 参考 Yao 关于 Api 的定义
    apis: Api
    // 参考 Yao 关于 Output 的定义
    output: Output
    // 页面描述
    layout: {
        operation: {
            actions: Actions
        }
        // 筛选项
        filters?: {
            columns: Array<{
                name: string
                width?: number
            }>
        }
        // 图表
        chart: {
            columns: Array<{
                name: string
                width?: number
            }>
        }
    }
    fields: {
        filters?: Common.Fields
        chart: Common.Fields
    }
}

文档组件博客例子发行版合作联系

Chart

图表和看板，用来对结构化数据进行可视化，以呈现更为清晰且易于理解的数据指标。

示例

注意：Chart组件既可作为页面使用，也可作为单独的组件使用。大屏和看板的区别是看板没有筛选工具栏，且右上角的按钮能链接到大屏。

Show Code

注意：Chart的Actions仅可使用`Common.historyPush`和`Common.historyBack`。

Props

type ChartComponent = 'numberCard' | 'table' | 'line' | 'bar' | 'lineBar' | 'map' | 'pie'

interface IProps {
    // 页面标题
    name: string
    // 版本
    version?: string
    // 页面描述
    description?: string
    // 参考 Yao 关于 Node 的定义
    nodes: Array<Node>
    // 参考 Yao 关于 Api 的定义
    apis: Api
    // 参考 Yao 关于 Output 的定义
    output: Output
    // 页面描述
    layout: {
        operation: {
            actions: Actions
        }
        // 筛选项
        filters?: {
            columns: Array<{
                name: string
                width?: number
            }>
        }
        // 图表
        chart: {
            columns: Array<{
                name: string
                width?: number
            }>
        }
    }
    fields: {
        filters?: Common.Fields
        chart: Common.Fields
    }
}

简体中文