3/4 注释环形图

示例

基础示例

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

参数说明

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

参数默认值

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)',
}

参数类型

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