Skip to content

堆叠条形图

示例

基础示例

vue
<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>

配置过的示例

vue
<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>

参数说明

索引类型必填默认值说明
0barHorizontalStack--
1Data-数据
2OptionsdefaultOptions配置参数
3EcOptions-ECharts 配置参数

参数默认值

options

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

参数类型

Data

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

export type Data =
  NumberKeyValuePairArray |
  NameData

Options

ts
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

ts
export type EcOptions = Partial<EChartsOption>

基于 MIT 许可发布