echarts-pie
示例
vue
<template>
<echarts-pie :data="data" height="200px" :color="color" label />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { EchartsPie } from 'v3-echarts'
const data = ref([
{ name: '衬衫', value: 5 },
{ name: '羊毛衫', value: 20 },
{ name: '雪纺衫', value: 36 },
{ name: '裤子', value: 10 },
{ name: '高跟鞋', value: 10 },
{ name: '袜子', value: 20 }
])
const color = ['#006eff', '#29cc85', '#ffbb00', '#ff584c', '#9741d9', '#1fc0cc']
</script>
props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
width | 容器宽度 | string | 100% |
height | 容器高度 | string | 100% |
data | 数据源 | object | - |
color | 饼图颜色 | string[] | [] |
radius | 饼图大小 | string[] | ['0%', '70%'] |
center | 饼图位置 | string[] | ['50%', '50%'] |
label | 是否显示标签 | boolean | false |
legend | 是否显示图例 | boolean | false |
carousel | 是否启用数据轮播 | carousel | false |
interval | 数据轮播间隔时间 | number | 5 |