# PieChart 饼图
# 基础用法
<template>
<div class="chart">
<pie-chart :data="data"/>
</div>
</template>
<script>
export default {
name: 'PieBase',
data() {
return {
data: [
{
name: '广州',
value: 30,
},
{
name: '佛山',
value: 15,
},
{
name: '深圳',
value: 8,
},
],
}
}
}
</script>
<style>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码
# Donut风格
默认情况下, PieChart组件的
pie-style为pizze, 设置pie-style为donut显示Donut风格饼图
<template>
<div>
<div class="chart">
<pie-chart
:data="data"
pie-style="donut"
/>
</div>
<div class="chart">
<pie-chart
:data="data"
pie-style="donut"
label-position="center"
legend
/>
</div>
</div>
</template>
<script>
export default {
name: "PieDonut",
data() {
return {
data: [
{
name: "广州",
value: 30
},
{
name: "佛山",
value: 15
},
{
name: "深圳",
value: 8
}
]
};
}
};
</script>
<style scoped>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码
# Rose风格
<template>
<div class="chart">
<pie-chart
:data="data"
pie-style="rose"
/>
</div>
</template>
<script>
export default {
name: 'PieRose',
data() {
return {
data: [
{
name: '广州',
value: 30,
},
{
name: '佛山',
value: 15,
},
{
name: '深圳',
value: 8,
},
],
}
}
}
</script>
<style scoped>
.chart {
width: 100%;
height: 300px;
}
</style>
显示代码