var val= [
{
name: '上游水库',
value: 175.27,
color: '#CFC03A'
},
{
name: '核心区域',
value: 187.89,
color: '#E9854F'
},
{
name: '下游影响',
value: 303.85,
color: '#40A486'
}
]
let total = 0
val.forEach(v => {
total += +v.value
})
total = +total.toFixed(2)
var trafficWay = val.map(item => {
return {
...item,
percent: +((+item.value / total) * 100).toFixed(2)
}
})
console.log('jr trafficWay', trafficWay)
var data = []
for (var i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 8,
shadowBlur: 20,
borderRadius: 20,
borderColor: trafficWay[i]['color'],
shadowColor: trafficWay[i]['color']
}
}
},
{
value: 8,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
}
}
)
}
var seriesOption = [
{
name: '',
type: 'pie',
clockWise: false,
radius: [75, 80],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
}
}
},
data: data
}
]
let option = {
// backgroundColor: '#0A2E5D',
// color: color,
title: [{
zlevel: 0,
text: total,
top: '44%',
left: '48%',
textAlign: 'center',
textStyle: {
color: '#fff',
fontSize: 24
}
},
{
text: "单位：单位" , // 显示单位
top: '10px',
left: '10px',
textAlign: 'left',
textStyle: {
color: '#fff',
fontSize: 12
}
}],
tooltip: {
show: false
},
toolbox: {
show: false
},
series: [
{
type: 'pie',
name: '外层细圆环',
radius: [75, 80],
center: ['50%', '50%'],
hoverAnimation: false,
clockWise: false,
itemStyle: {
normal: {
color: '#6e717555'
}
},
label: {
show: false
},
data: [100]
},
{
name: '',
type: 'pie',
startAngle: 0,
radius: 65,
clockWise: false,
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
labelLine: {
show: false
},
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
{
offset: 1,
color: 'rgba(3, 155, 179, 0.5)'
},
{
offset: 0,
color: 'rgba(3, 155, 179, 0.5)'
}
]),
shadowBlur: 10
}
},
data: [
{
value: 100
}
]
},
...seriesOption
]
}