效果图
![饼图+水波球](https://i-blog.csdnimg.cn/blog_migrate/209ae68066f61487cc09fbea011ab339.png)
代码
let val1dataPie = [
{ name: "test1", value: 10 },
{ name: "test2", value: 20 },
{ name: "test3", value: 30 },
{ name: "test4", value: 10 },
{ name: "test5", value: 40 },
{ name: "test6", value: 60 },
];
let arr = ['middleLost', 57658, val1dataPie, '总计']
const piegraph = {
title: {
show: true,
text: '统计',
padding: 10,
textStyle: {
fontSize:14
}
},
legend: {
type:'scroll',
orient: 'vertical',
right: '10px',
y:'center',
top:'20px',
bottom:'10px',
icon:'emptyCircle',
data: ["test1", "test2", "test3", "test4", "test5", "test6"]
},
tooltip: {
show:true,
trigger:'item',
formatter: '{b}: {c} ({d}%)'
},
series: [{
type: 'liquidFill',
radius: '65%',
itemStyle: {
normal: {
opacity: 0.4,
shadowBlur: 0,
shadowColor: 'blue'
}
},
name: arr[3],
data: [0.6, 0.5, 0.4, 0.3],
backgroundStyle: {
color: '#ffffff'
},
color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#79C8F2'
}, {
offset: 1,
color: '#E4F3FC'
}])],
center: ['35%','50%'],
label: {
normal: {
formatter: '',
}
},
outline: {
itemStyle: {
borderColor: '#86c5ff',
borderWidth: 0
},
borderDistance: 0
}
},{
type: 'pie',
radius: ['65%', '80%'],
center: ['35%','50%'],
color: ['#c487ee', '#deb140','#49dff0', '#034079', '#6f81da', '#00ffb4'],
hoverAnimation: true,
label: {
show: false
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 2,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data: arr[2]
}
]
}
this.setState({
piegraph:piegraph
})