var dataList = [13, 21, 39, 14, 22];
var nameList = ["货船", "杂船", "渔船", "集装箱船", "其他"];
var colorList = ["#7b55d8", "#366ccc", "#46b1ce", "#6fd8c9", "#efc97b", "#374e90", "#77a4ef", "#ef9f77", "#89e645", "#e67645"]
var lengthList = []
nameList.forEach(function (item) {
lengthList.push({ "name": (item).toString(), "icon": "circle" })
})
var totalNum = dataList.reduce((prev, curr) => {
return prev + curr
})
var seriesList = []
var valList = []
dataList.forEach(function (item, index) {
var obj = {
value: Math.floor(((item / totalNum * 10000) / 10000) * 100),
value2: item
}
if (index == dataList.length - 1) {
var total = valList.reduce((prev, curr) => {
return prev + curr
})
obj.value = Number((100 - total).toFixed(2))
valList.push(obj.value)
} else {
valList.push(obj.value)
}
// if(id=="groupEch2"){
// console.log(obj);
// }
seriesList.push({
name: nameList[index],
type: 'bar',
data: [obj],
stack: 'one',
coordinateSystem: 'polar',
roundCap: true,
zlevel: 20,
itemStyle: {
normal: {
color: colorList[index],
borderWidth: 2,
borderColor: colorList[index]
}
},
})
})
var center = ['50%', '36%']
var radius1 = ['44%', '70%']
var radius2 = ['0%', '38%']
var titleX = '48%'
var titleY = '30%'
var titleSize = 28;
var legendBottom = "8%"
seriesList.push({
name: '外层背景',
type: 'pie',
radius: radius2,
silent: true,
center: center,
itemStyle: {
normal: {
opacity: 1,
color: "#ffffff",
}
},
label: {
normal: {
show: false,
},
},
data: [{
value: 0,
name: '外层背景'
}]
})
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.seriesName + ' <br/> ' + params.marker + params.data.value2 + " <br/> " + params.data.value + "%"
}
},
title: [{
text: '{num|' + totalNum + '}',
x: titleX,
y: titleY,
textAlign: 'center',
textStyle: {
rich: {
num: {
fontSize: titleSize,
fontWeight: 'bold',
lineHeight: 40,
// verticalAlign:"middle",
color: '#000000'
},
}
},
}],
legend: {
width: "240",
x: 'center',
bottom: legendBottom,
data: lengthList,
itemHeight: 10,
itemWidth: 10,
textStyle: {
color: "#000000",
fontSize: 14,
lineHeight: 14,
},
tooltip: {
show: true,
formatter: function (params) {
var name = params.name
var i = nameList.indexOf(name)
var value = dataList[i]
var color = colorList[i]
var marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`
return name + ' <br/> ' + marker + value + ' <br/> ' + valList[i] + "%"
},
}
},
angleAxis: {
max: 100,
clockwise: true, // 逆时针
show: false
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
polar: {
center: center,
radius: radius1,
},
series: seriesList
};