Horizontal Stacked Bar Chart

Examples

Basic Example

<script setup>
const data = [
  {
    name: 2021,
    data: {
      Taylor: 81,
      Clark: 78,
      Martin: 75,
      Perez: 80,
      Lewis: 86,
    },
  },
  {
    name: 2022,
    data: {
      Taylor: 51,
      Clark: 88,
      Martin: 82,
      Perez: 83,
      Lewis: 61,
    },
  },
  {
    name: 2023,
    data: {
      Taylor: 81,
      Clark: 87,
      Martin: 57,
      Perez: 82,
      Lewis: 68,
    },
  },
]
</script>

<template>
  <div
    v-ec="['barHorizontalStack', data]"
    style="width: 100%; height: 300px; padding-top: 15px;"
  />
</template>

Configured Example

<script setup>
const data = [
  {
    name: 2021,
    data: {
      Taylor: 81,
      Clark: 78,
      Martin: 75,
      Perez: 80,
      Lewis: 86,
    },
  },
  {
    name: 2022,
    data: {
      Taylor: 51,
      Clark: 88,
      Martin: 82,
      Perez: 83,
      Lewis: 61,
    },
  },
  {
    name: 2023,
    data: {
      Taylor: 81,
      Clark: 87,
      Martin: 57,
      Perez: 82,
      Lewis: 68,
    },
  },
]
</script>

<template>
  <div
    v-ec="[
      'barHorizontalStack',
      data,
      {
        itemColor: ['#DC3545', '#FFC107', '#0D6EFD'],
        borderRadius: 1000, // or [topLeft, topRight, bottomRight, bottomLeft]
        barMaxWidth: 18,
      },
    ]"
    style="width: 100%; height: 300px; padding-top: 15px;"
  />
</template>

Parameter Descriptions

Index	Type	Required	Default Value	Description
0	barHorizontalStack	Yes	-	-
1	Data	Yes	-	Data
2	Options	No	defaultOptions	Configuration Parameters
3	EcOptions	No	-	ECharts Configuration

Default Parameter Values

options

const defaultOptions: Options = {
  itemColor: 'auto',
  borderRadius: 0,
  showLabel: true,
}

Parameter Types

Data

export type NameData = { name: string, data: NumberObject | NumberKeyValuePairArray }[]

export type Data =
  NumberKeyValuePairArray |
  NameData

Options

export interface Options {
  /**
   * The color of the bar. If `data` passes in an array,
   * different colors can also be defined here by passing in an array.
   *
   * @see https://echarts.apache.org/option.html#series-bar.itemStyle.color
   */
  itemColor?: string | string[]

  /**
   * @see https://echarts.apache.org/option.html#series-bar.barMaxWidth
   */
  barMaxWidth?: number | string

  /**
   * @see https://echarts.apache.org/option.html#series-bar.barMinWidth
   */
  barMinWidth?: number | string

  /**
   * @see https://echarts.apache.org/option.html#series-bar.itemStyle.borderRadius
   */
  borderRadius?: number | [number, number, number, number]

  showLabel?: boolean
}

EcOptions

export type EcOptions = Partial<EChartsOption>