# PieChart
通过 options
传入基础配置即可
<pie-chart class="e-chart" v-for="item in pies" :key="item.id" :options="item.pie"></pie-chart>
<script>
export default {
data() {
return {
pies: [
{
id: 1,
pie: {
text: '基础 - 圆环',
seriesData: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
},
{
id: 2,
pie: {
inradius: [0, '60%'],
showLegend: true,
legendTop: 'bottom',
legend: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
text: '基础 - 圆饼',
seriesData: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
},
{
id: 3,
pie: {
inradius: [0, '30%'],
outradius: ['55%', '75%'],
text: '外环内饼',
seriesData: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
},
{
id: 4,
pie: {
inradius: [20, 110],
roseType: 'radius',
text: '南丁格尔图',
seriesData: [
{ value: 10, name: 'rose1' },
{ value: 5, name: 'rose2' },
{ value: 15, name: 'rose3' },
{ value: 25, name: 'rose4' },
{ value: 20, name: 'rose5' },
{ value: 35, name: 'rose6' },
{ value: 30, name: 'rose7' },
{ value: 40, name: 'rose8' }
]
}
}
]
}
}
}
</script>
显示代码 复制代码 复制代码