Bar 柱状图

柱状图组件,用来表示有数据纵深的数据。

使用场景

  • 日均访问量。

  • 饮食偏好。

示例

{
"状态分布": {
"bind": "datasource_status",
"view": {
"type": "Bar",
"props": {
"height": 240,
"nameKey": "status",
"axisLabel": { "interval": 0, "fontSize": 12 },
"series": [
{
"valueKey": "count",
"type": "bar",
"colorBy": "data",
"itemStyle": { "borderRadius": 6 },
"splitLine": { "show": false },
"axisLabel": { "show": false }
}
]
}
}
}
}

Props

export interface IProps {
name: string
height: number
x_key: string
vertical: boolean
textLength: number
textWrap: boolean
hide_label?: boolean
}

API

属性说明类型默认值必填版本
name数据 keystring-
height高度string-
x_key横坐标 keystring-
vertical是否纵向显示string-
textLength文字长度限制string-
textWrap文字超过长度是否换行string-
hide_label隐藏标题string-

更多属性见 Echarts Bar

Bar 柱状图

柱状图组件,用来表示有数据纵深的数据。

使用场景

  • 日均访问量。

  • 饮食偏好。

示例

{
"状态分布": {
"bind": "datasource_status",
"view": {
"type": "Bar",
"props": {
"height": 240,
"nameKey": "status",
"axisLabel": { "interval": 0, "fontSize": 12 },
"series": [
{
"valueKey": "count",
"type": "bar",
"colorBy": "data",
"itemStyle": { "borderRadius": 6 },
"splitLine": { "show": false },
"axisLabel": { "show": false }
}
]
}
}
}
}

Props

export interface IProps {
name: string
height: number
x_key: string
vertical: boolean
textLength: number
textWrap: boolean
hide_label?: boolean
}

API

属性说明类型默认值必填版本
name数据 keystring-
height高度string-
x_key横坐标 keystring-
vertical是否纵向显示string-
textLength文字长度限制string-
textWrap文字超过长度是否换行string-
hide_label隐藏标题string-

更多属性见 Echarts Bar