示例
示例数据
let dataList = [
{ name: '大米', value: 3051 },
{ name: '互联网', value: 4256 },
{ name: '医疗', value: 687 },
{ name: '建筑', value: 1654 },
...
]
数据处理
let total = 0;
dataList && dataList.filter((item) => {
total += parseInt(item.value)
})
let data = []
dataList && dataList.map((item, index) => {
let option1 = {
name: "",
value: total / 100,
legend: false,
tooltip: {
show: false,
},
itemStyle: {
color: "rgba(0,0,0,0)"
}
}
let option = {
...item
}
data.push(option, option1)
})
option示例
let option = {
color: ['#00FFA2', '#75CCFF', '#18ADFB', '#0081FF', ...],
title: {
text: dataList[0].value,
subtext: dataList[0].name,
x: "49%",
top: "45%",
subtextStyle: {
fontSize: 22,
color: "#9FA5AD"
},
textStyle: {
fontSize: 49,
fontWeight: "Bold",
color: "#fff"
},
textAlign: "center"
},
tooltip: {
trigger: 'item'
},
legend: {
show: false
},
series: [
{
type: "pie",
radius: ["50%", "56%"],
center: ["50%", "50%"],
z: 11,
itemStyle: {
normal: {
borderWidth: 8,
borderColor: "rgba(0, 0, 0, 0)",
},
},
// v5和v4版本差异,高亮偏移量设置
emphasis: {
disabled: false,
scale: true,
scaleSize: 15,
},
label: {
show: false,
},
labelLine: {
show: false,
},
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
type: "pie",
radius: ["40%", "45%"],
center: ["50%", "50%"],
z: -1,
legendHoverLink: false,
selectedMode: false,
hoverAnimation: false,
cursor: 'auto',
tooltip: {
show: false
},
title: {
show: false
},
itemStyle: {
normal: {
color: '#272C38',
borderWidth: 8,
borderColor: "rgba(0, 0, 0, 0)",
},
},
legend: {
show: true,
},
label: {
show: false,
},
labelLine: {
show: false,
},
data: data,
},
]
}
处理方式:等分