Pie 组件说明
Pie
组件用于在图表中创建饼图,是 ECharts 饼图配置的组件化实现。饼图是一种将数据按比例划分成不同扇形区域的图表类型,常用于展示各部分数据在总体中所占的比例关系。
基本用法
vue
<template>
<VueEcharts style="width:100%;height:300px;">
<!-- 基础饼图 -->
<Pie
:data="data"
name="访问来源"
/>
<Title text="用户访问来源分布" />
<Tooltip />
<Legend />
</VueEcharts>
</template>
环形图
通过设置 radius
属性可以创建环形图,该属性接受一个数组,分别表示内半径和外半径:
vue
<template>
<VueEcharts style="width:100%;height:300px;">
<Pie
:data="data"
name="设备分布"
:radius="['40%', '70%']"
/>
<Title text="用户设备使用分布" />
<Tooltip />
<Legend />
</VueEcharts>
</template>
南丁格尔玫瑰图
通过设置 roseType
属性可以创建南丁格尔玫瑰图,该属性值为 'radius'
时,扇区的半径随数据大小而变化:
vue
<template>
<VueEchart style="width:100%;height:300px;">
<Pie
:data="data"
name="月度销量"
roseType="radius"
/>
<Title text="月度销量玫瑰图" />
<Tooltip />
<Legend />
</VueEchart>
</template>
嵌套饼图
可以在同一个图表中使用多个 Pie
组件创建嵌套饼图,通过设置不同的 radius
来区分层级:
vue
<template>
<VueEcharts style="width:100%;height:300px;">
<Pie
:data="data"
name="产品类别"
:radius="['0%', '30%']"
/>
<Pie
:data="data2"
name="销售渠道"
:radius="['40%', '70%']"
/>
<Title text="产品销售分布" />
<Tooltip />
<Legend />
</VueEcharts>
</template>