Bar Histogram

The bar chart component used to represent data with data depth.

scenes to be used

  • Average daily visits.

  • Dietary preferences.

Example

{
"state distribution": {
"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

PropertiesDescriptionTypeDefaultRequiredVersion
namedata keystring-yes
heightheightstring-yes
x_keyabscissa keystring-yes
verticalwhether to display verticallystring-no
textLengthtext length limitstring-no
textWrapWhether the text exceeds the length to wrapstring-No
hide_labelhide titlestring-no

For more properties, see Echarts Bar

Bar Histogram

The bar chart component used to represent data with data depth.

scenes to be used

  • Average daily visits.

  • Dietary preferences.

Example

{
"state distribution": {
"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

PropertiesDescriptionTypeDefaultRequiredVersion
namedata keystring-yes
heightheightstring-yes
x_keyabscissa keystring-yes
verticalwhether to display verticallystring-no
textLengthtext length limitstring-no
textWrapWhether the text exceeds the length to wrapstring-No
hide_labelhide titlestring-no

For more properties, see Echarts Bar