const trafficWay = [
{
name: '岳麓区',
value: 30
},
{
name: '望城区',
value: 20
},
{
name: 'fff ',
value: 30
},
{
name: '45',
value: 20
},
]
// var nameArray = trafficWay.map((item) => {
// return item.name
// })
var sum= trafficWay.reduce((prev,cur)=>{return prev+cur.value*1},0);
const data = []
const color = ['#83F9F8', '#83F9F8', '#027AD0', '#027AD0']
for (let i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
borderWidth: 15,
borderRadius: 400,
label: {
show: true, //false不显示饼图上的标签
position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
formatter: '{b}:{c}',
},
//只有设置了label:show=ture;position=outside 设置labelLine才会有效
labelLine: {
show: true, //显示引导线
length: 500, //连接饼图第1段线条的长度 length length2 不写自适应
length2: 300, //链接饼图第2段线条长度
smooth: false, //是否光滑连接线
},
}
}
},
{
value: sum/200,
name: '',
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)'
}
}
}
)
}
const seriesOption = [
// 内圆
{
name: '',
type: 'pie',
clockWise: false,
radius: ['130%', '150%'],
hoverAnimation: false,
center: ['50%', '50%'],
top: 'center',
itemStyle: {
normal: {
opacity: 1,
label: {
position: 'outside',
alignTo: 'edge',
margin: 1,
formatter: function (params) {
if (params.name !== '') {
return (
'{b|' + params.name + '}\n{d|' + params.value + '} '
);
} else {
return '';
}
},
rich: {
b: {
fontSize: 14,
color: 'rgba(255, 255, 255,.6)',
align: 'left',
padding: 4,
},
d: {
fontSize: 22,
color: 'rgba(0, 255, 253, 1)',
align: 'left',
marginTop:-100,
padding: 4,
},
},
},
labelLine: {
normal: {
length: 10,
length2: 5,
lineStyle: {
width: 1,
},
},
},
},
},
data: data
},
{
name: '',
type: 'pie',
clockWise: false,
radius: ['70%', '110%'],
hoverAnimation: false,
center: ['50%', '50%'],
top: 'center',
itemStyle: {
normal: {
opacity:0.6,
label: {
show: false
}
}
},
data: data
},
]
option = {
color: color,
backgroundColor:'#000',
tooltip: {
show: false
},
series: seriesOption
}