条形图

示例

基础示例

<script setup>
const data = {
  Taylor: 81,
  Clark: 78,
  Martin: 75,
  Perez: 80,
}
</script>

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

配置过的示例

<script setup>
const data = [
  {
    name: 2021,
    data: {
      Taylor: 81,
      Clark: 78,
      Martin: 75,
    },
  },
  {
    name: 2022,
    data: {
      Taylor: 31,
      Clark: 88,
      Martin: 28,
    },
  },
  {
    name: 2023,
    data: {
      Taylor: 18,
      Clark: 87,
      Martin: 57,
    },
  },
]
</script>

<template>
  <div
    v-ec="[
      'barHorizontal',
      data,
      {
        itemColor: ['#DC3545', '#FFC107', '#0D6EFD'],
        borderRadius: [0, 1000, 1000, 0],
        barMaxWidth: 10,
      },
    ]"
    style="width: 100%; height: 300px; padding: 15px 0 0 15px;"
  />
</template>

参数说明

索引	类型	必填	默认值	说明
0	barHorizontal	是	-	-
1	Data	是	-	数据
2	Options	否	defaultOptions	配置参数
3	EcOptions	否	-	ECharts 配置参数

参数默认值

options

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

参数类型

Data

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

export type Data =
  NumberObject |
  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[]
}

EcOptions

export type EcOptions = Partial<EChartsOption>