柱状图

图表底层基于 ECharts，所以参考 ECharts 官方配置项文档使用即可。

同时，在 ECharts 之上我们对其能力做了扩展，暴露了部分自定义配置项（均以 dv 前缀进行命名，以和 ECharts 配置项做以区分），在这里进行说明。

实时调试预览

柱状图其它相关组件示例请在组件示例平台搜索查看。

自定义配置项

以下配置项只在 series.type: 'bar' 时有效。

series.label.dvPosition

• 类型 'valueDirection' | 'adaptBarWidth'

取值 'valueDirection'，标签自动放置在正负值方向的位置上。

示例配置：

{
  series: {
    type: 'bar',
    label: {
      dvPosition: 'valueDirection'
    }
  }
}

取值 'adaptBarWidth'，若 barWidth 大于文本长度, 则文本显示在柱子内部，否则文本显示在柱子外部。

v0.2.50+

示例配置：

{
  series: {
    type: 'bar',
    label: {
      dvPosition: 'adaptBarWidth'
    }
  }
}

v1.7.5+

如果额外配置了series.label.position字段，则series.label.dvPosition不生效，以series.label.position的样式为准。

现在series.label.position字段支持值为outside，详细信息参考ECharts官方仓库修改记录。

series.label.dvInsideColor

• 类型 string

v0.2.50+

label 显示在柱子内部时的文字颜色

提示

须先设置series.label.dvPosition为'adaptBarWidth', 当前配置才有效

示例配置：

{
  series: {
    type: 'bar',
    label: {
      dvInsideColor: 'red'
    }
  }
}

series.label.dvOutsideColor

• 类型 string

v0.2.50+

label显示在柱子外部时的文字颜色

提示

须先设置series.label.dvPosition为'adaptBarWidth', 当前配置才有效

示例配置：

{
  series: {
    type: 'bar',
    label: {
      dvOutsideColor: 'blue'
    }
  }
}

series.dvMaxLabelCount

• 类型 number

v0.0.18+

最多显示的 label 数量，超过该数量后隐藏所有 label

提示

当前实现仅考虑了单柱图

示例配置：

{
  series: {
    type: 'bar',
    dvMaxLabelCount: 8
  }
}

series.dvSortType

• 类型 string

v0.2.18+

动态柱状图排序类型, 可选值有desc和asc

示例配置：

{
  series: {
    type: 'bar',
    dvSortType: 'asc'
  }
}

提示

也可以直接配置yAxis.inverse来实现此功能

series.dvValueKey

• 类型 string
• 默认值 'value'

动态柱状图值的键名，默认是 value 属性。一般在双柱图中需要指定值的键名。

示例配置：

{
  series: {
    type: 'bar',
    dvValueKey: 'key'
  }
}

series.dvSortKey

• 类型 string
• 默认值 'value'

v0.2.39+

动态柱状图用于排序的字段，默认是 value 属性。在不想按 value 来排序时指定一个自定义的字段来作为排序依据。

示例配置：

{
  series: {
    type: 'bar',
    dvSortKey: 'sortKey'
  }
}

series.itemStyle.dvBorder

信息

ECharts 官方配置项 无法实现配置单侧柱子边框，所以提供该扩展配置项。（不要同时使用官方配置项和该扩展配置项）

• 类型

  type CustomItemStyle {
    dvBorderWidth?: number | [number, number, number, number];
    dvBorderColor?: string | [string, string, string, string];
    // @see https://echarts.apache.org/zh/option.html#series-bar.itemStyle.borderType
    dvBorderType?: BorderType | [BorderType, BorderType, BorderType, BorderType];
  }

v0.5.0+

配置柱状图柱子的某一侧边框。

示例：

{
  type: 'bar',
  itemStyle: {
    // number | top / right / bottom / left
    dvBorderWidth: [2, 0, 0, 0],
    // string | top / right / bottom / left
    dvBorderType: 'solid',
    // string | top / right / bottom / left
    dvBorderColor: '#000',
  },
  data: [
    {
      itemStyle: {
        dvBorderWidth: [2, 0, 0, 0],
        dvBorderType: 'solid',
        dvBorderColor: '#000',
      },
    }
  ]
}