仪表盘
基本示例
点击查看代码
js
<template>
<div style="height:300px;width: 300px;">
<e-gauge-chart :value="value" />
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
value: 66
}
}
}
</script>js
<template>
<div style="height:300px;width: 300px;">
<e-gauge-chart :value="value" />
</div>
</template>
<script setup>
import { EGaugeChart } from 'e-datav-vue3';
const value = ref(66);
</script>js
import { GaugeChart } from 'e-datav-react';
function Page() {
const [value, setValue] = useState(66);
return (
<div style={{ width: 300, height: 300 }}>
<GaugeChart value={value} />
</div>
)
}
export default Page显示文本标题示例
点击查看代码
js
<template>
<div style="height:300px;width: 300px;">
<e-gauge-chart :value="value" text="今日完成率" :textFontSize="24" />
</div>
</template>
<script setup>
import { EGaugeChart } from 'e-datav-vue3';
const value = ref(66);
</script>属性
| 字段 | 类型 | 备注 |
|---|---|---|
| value | Number | 百分比值，仅限0-100之间值 |
| valueFontSize | Number | 数值字体大小，默认30 |
| text | String | 文本标题内容 |
| textFontSize | Number | 文本字体大小，默认30 |
| spacing | Number | 文字上下间距，默认2 |