间隙环形图

示例

基础示例

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

参数说明

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

参数默认值

options

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

参数类型

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>