Gap Doughnut Chart

Examples

Basic Example

<script setup>
const data = [
  ['Lewis', 86],
  ['Taylor', 71],
  ['Martin', 35],
  ['Clark', 58],
  ['Perez', 80],
]
</script>

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

Parameter Description

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

Default Parameter Values

options

const defaultOptions: Options = {
  radius: ['40%', '70%'],
  hoverFontSize: 20,
  padAngle: 5,
  hoverColor: 'inherit',
  itemRadius: 7,
}

Parameter Types

Data

export type Data = (NumberObject | NumberKeyValuePairArray)[]

Options

export interface Options {
  /**
   * @see https://echarts.apache.org/option.html#series-pie.radius
   */
  radius?: string[]

  /**
   * @see https://echarts.apache.org/option.html#series-pie.itemStyle.borderRadius
   */
  itemRadius?: number

  /**
   * @see https://echarts.apache.org/option.html#series-pie.emphasis.label.fontSize
   */
  hoverFontSize?: number

  /**
   * @see https://echarts.apache.org/option.html#series-pie.emphasis.label.color
   */
  hoverColor?: string

  /**
   * @see https://echarts.apache.org/option.html#series-pie.padAngle
   */
  padAngle?: number
}

EcOptions

export type EcOptions = Partial<EChartsOption>