Simple Bar Chart

Examples

Basic Example

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

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

Configured Example

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

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

Parameter Descriptions

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

Default Parameter Values

options

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

Parameter Types

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>