Three-Quarter Comment Ring Chart

Examples

Basic Example

<script setup>
const data = [
  { name: 'Perez', value: 1321, unit: 'US' },
  { name: 'Harris', value: 4211, unit: 'US' },
  { name: 'Walker', value: 8171, unit: 'US' },
  { name: 'Davis', value: 12171, unit: 'US' },
]
</script>

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

Parameter Description

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

Default Parameter Values

options

const defaultOptions: Options = {
  colors: ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#198754', '#0DCAF0'],
  textColors: {
    name: '#666',
    percent: '#333',
    value: '#333',
    unit: '#888',
  },
  ringBg: '#E3F0FF',
  lineWidth: 130,
  lineColor: 'rgba(0, 0, 0, 0.3)',
}

Parameter Types

Data

export type Data = { name: string, value: number, unit: string }[]

Options

export interface Options extends Record<string, unknown> {
  colors?: string[]
  ringBg?: string
  textColors?: {
    name?: string
    percent?: string
    value?: string
    unit?: string
  }
  lineWidth?: number
  lineColor?: string
}

EcOptions

export type EcOptions = Partial<EChartsOption> | null