如效果图所示,第三个环形图应该是代码中['#FED209','#CCCCCC']这两个色块。然而在这就显示了一个色块。当我将第二个环形图删除后。则又显示正常。当添加第5个环形图时设置颜色,也如第三个一样只有一个色块。这是不正确的。在实际项目中,我们需要添加多个环形图,设置不同的颜色以做区分,在这达不到效果。
配置项如下
app.title = '环形图';
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '重大风险',
type: 'pie',
color: ['#e00000', '#CCCCCC'],
radius: ['25%', '45%'],
center: ['15%', '25%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 50,
name: 'vvv'
}, {
value: 50,
name: '其他'
}]
}, {
name: '较大风险',
type: 'pie',
color: ['#fd7c00', '#CCCCCC'],
radius: ['25%', '45%'],
center: ['60%', '25%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 50,
name: 'nnn'
}, {
value: 50,
name: '其他'
}]
}, {
name: '一般风险',
type: 'pie',
color: ['#fed209', '#CCCCCC'],
radius: ['25%', '45%'],
center: ['15%', '75%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 100,
name: 'xxx告'
}, {
value: 50,
name: '其他'
}]
}, {
name: '较小风险',
type: 'pie',
color: ['#308fed', '#CCCCCC'],
radius: ['25%', '45%'],
center: ['60%', '75%'],
avoidLabelOverlap: false,
hoverAnimation: false,
label: {
normal: {
show: false,
position: 'center'
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 50,
name: 'ddd'
}, {
value: 50,
name: '其他'
}]
}]
};