BarGraph
柱状图，使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。
使用场景
- 显示数据随时间或有序类别而变化的趋势。
API
Attributes
该组件属性。
| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| data | 图表数据 1、如果只显示一条默认柱状图，直接传入数据如[12,14,...]；2、如果要显示多条曲线，请传入 BarData[] | number[] | BarData[] | 是 | - | - |
| BarOption | 柱状图曲线配置，需结合data.name一同使用,传入数据类型为 BarOption[] | BarOption[] | 否 | - | - |
| cateAxis | 类目轴配置，1、默认类目轴是 x 轴，当只有一条类目轴的时候，传入数据 Array；2、当类目轴有多条的时候，可以传入CateAxisOptions | string[] | CateAxisOptions[] | 是 | - | - |
| valueAxis | 数值轴配置，1、默认数值轴是 y 轴，默认可以不传参数；2、如果数值轴有多条，或者需要覆盖默认配置时，可以为对象类型的 series 配置数组 | ValueAxisOptions[] | 是 | - | - |
| isRotateAixs | 是否旋转坐标轴，即 x 轴 y 轴互换(x 变数值轴，y 轴变类目轴) | boolean | 否 | true,false | false |
| valueSplitLine | 是否显示数值刻度分割线 | boolean | 否 | - | true |
| valueAxisLine | 是否显示数值轴坐标轴线 | boolean | 否 | - | true |
| valueAxisTick | 是否显示数值轴坐标刻度 | boolean | 否 | - | true |
| valueAxisLabel | 是否显示数值轴坐标刻度标签 | boolean | 否 | - | true |
| isPercent | 数据是否是百分数 | boolean | 否 | - | true |
| tooltipFormatter | tooltip 格式化器 | function | 否 | - | - |
| legendOrder | legend 排序(根据最后一组数据排序) | string | 否 | none | desc | asc | none |
BarData
柱状图 data 的格式。
| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| data | 数据 | number[] | 是 | - | - |
| name | 数据对应的名字，数据和配置一一对应使用的参数 | string | 否 | - | - |
BarOption
柱状图配置参数。
| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| type | 图表类型 | string | 是 | bar | - |
| name | 该组数据名称，用于 tooltip 的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列，也是数据和配置一一对应使用的参数 | string | 是 | - | - |
| label | 标签项配置，具体参考barLabel | object | 否 | - | - |
| colorBy | 从调色盘 option.color 中取色的策略 | string | 否 | series|data | - |
| coordinateSystem | 该系列使用的坐标系，默认 cartesian2d | string | 否 | 'cartesian2d' | 'polar' | - |
| xAxisIndex | 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用 | number | 否 | - | - |
| yAxisIndex | 使用的 y 轴的 index，在单个图表实例中存在多个 y 轴的时候有用 | number | 否 | - | - |
| showBackground | 是否显示柱条的背景色。通过 backgroundStyle 配置背景样式 | boolean | 否 | - | - |
| backgroundStyle | 柱条的背景样式 | object | 否 | - | - |
| itemStyle | 柱状拐点标志的样式 | object | 否 | - | - |
| emphasis | 柱状图的高亮状态 | object | 否 | - | - |
| blur | 柱状图的淡出状态。开启 emphasis.focus 后有效 | object | 否 | - | - |
| select | 数据选中时的图形样式和标签样式。开启 selectedMode 后有效 | object | 否 | - | - |
| selectedMode | 选中模式的配置，表示是否支持多个选中，默认关闭 | string | boolean | 否 | 'single' | 'multiple' | true | false | - |
| stack | 数据堆叠，同个类目轴上系列配置相同的 stack 值后，后一个系列的值会在前一个系列的值上相加 | string | 否 | - | - |
| sampling | 柱状图在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率，默认关闭，也就是全部绘制不过滤数据点 | string | 否 | 'lttb' | 'average' | 'max' | 'min' | 'sum' | - |
| clip | 是否裁剪超出坐标系部分的图形 | boolean | 否 | true,false | true |
| silent | 图形是否不响应和触发鼠标事件，即响应和触发鼠标事件 | boolean | 否 | true,false | false |
| animation | 是否开启动画 | boolean | 否 | true,false | true |
CateAxisOptions
类目轴配置，默认类目轴可以只传类目数据，例如['2021/07/01', '2021/07/02',...]。当类目轴有多条，或者需要覆盖默认配置时，可以按以下对象配置 options。
| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| data | 类目轴数据配置 | string[] | {value:string, textStyle:object}[] | 是 | - | - |
| show | 是否显示坐标轴，默认 true | boolean | 否 | true，false | true |
| type | 坐标轴类型，分类目轴和数值轴 | string | 否 | 'value' | 'category' | true |
| name | 坐标轴名称，设置则会显示在轴末端 | string | 否 | - | - |
| offset | 相对于默认位置的偏移，相同的位置上有多个轴时有效 | number | 否 | - | - |
| nameGap | 坐标轴名称与轴线之间的距离 | number | 否 | - | - |
| nameRotate | 坐标轴名字旋转，角度值 | number | 否 | - | - |
| inverse | 是否反向坐标轴 | number | 否 | - | - |
| nameLocation | 坐标名称显示位置，默认 end | string | 否 | 'end' | 'start' | 'center' | 'middle' | end |
| axisLine | 坐标轴轴线相关设置, 具体请参考axisLine | object | 否 | - | - |
| axisTick | 坐标刻度相关配置, 具体请参考axisTick | object | 否 | - | - |
| axisLabel | 坐标刻度标签配置, 具体请参考axisLabel | object | 否 | - | - |
| splitLine | 坐标刻度分隔线, 具体请参考splitLine | object | 否 | - | - |
| axisPointer | 坐标轴指示器, 具体请参考axisPointer | object | 否 | - | - |
ValueAxisOptions
数值轴配置，1、默认数值轴是 y 轴，默认可以不传参数；2、如果数值轴有多条，或者需要覆盖默认配置时，可以为对象类型的 series 配置数组
| 参数 | 说明 | 类型 | 必选 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| position | 数值轴位置,默认第一个为 left，第二个为 right | string | 否 | left，right | - |
| show | 是否显示坐标轴，默认 true | boolean | 否 | true，false | true |
| type | 坐标轴类型，分类目轴和数值轴 | string | 否 | 'value' | 'category' | true |
| name | 坐标轴名称，设置则会显示在轴末端 | string | 否 | - | - |
| offset | 相对于默认位置的偏移，相同的位置上有多个轴时有效 | number | 否 | - | - |
| nameGap | 坐标轴名称与轴线之间的距离 | number | 否 | - | - |
| nameRotate | 坐标轴名字旋转，角度值 | number | 否 | - | - |
| inverse | 是否反向坐标轴 | number | 否 | - | - |
| nameLocation | 坐标名称显示位置，默认 end | string | 否 | 'end' | 'start' | 'center' | 'middle' | end |
| axisLine | 坐标轴轴线相关设置, 具体请参考axisLine | object | 否 | - | - |
| axisTick | 坐标刻度相关配置, 具体请参考axisTick | object | 否 | - | - |
| axisLabel | 坐标刻度标签配置, 具体请参考axisLabel | object | 否 | - | - |
| splitLine | 坐标刻度分隔线, 具体请参考splitLine | object | 否 | - | - |
| axisPointer | 坐标轴指示器, 具体请参考axisPointer | object | 否 | - | - |