let option = {}
let total = 100
let self = this
let color = ['rgba(181,221,216,0.78)','#5FA7A4','#FFDC7B','#E37C3E']
option = {
color:color,
tooltip: {
show:false,
trigger: 'item'
},
legend: {
show:false,
},
//饼图中间文字
title: {
text: '{name|' + total + '}\n{val| （处）}',
top: 'center',
left: 'center',
textStyle: {
rich: {
name: {
fontSize: 14,
fontWeight: 'bold',
color: '#000',
padding: [10, 0]
},
val: {
fontSize: 12,
fontWeight: 'bold',
color: '#000',
}
}
}
},
series: [
{
name: '',
type: 'pie',
radius: ['50%', '70%'],//实现圆心和半径
center:['50%','50%'],//实现图表显示位置（左右，上下）
avoidLabelOverlap: false,
hoverAnimation: false,
clockwise: false,
label: {
normal: {
formatter: params => {
if(params.name == '国家级'){
return (
'{name|' + params.name + '}\n{hr|}\n{value1|' + params.value + '处}'
);
}else if(params.name == '市县级'){
return (
'{name|' + params.name + '}\n{hr|}\n{value2|' + params.value + '处}'
);
}else if(params.name == '省级'){
return (
'{name|' + params.name + '}\n{hr|}\n{value3|' + params.value + '处}'
);
}else{
return (
'{name|' + params.name + '}\n{hr|}\n{value4|' + params.value + '处}'
);
}
},
padding: [2, 0, 0, 0],
rich: {
name: {
fontSize: 12,
padding: [0, -40, 0, -50],
color: '#000'
},
value1: {
fontSize: 12,
padding: [0, -40, 0, -30],
fontWeight:700,
color: '#B5DDD8'
},
value2: {
fontSize: 12,
padding: [0, -40, 0, -30],
fontWeight:700,
color: '#5FA7A4'
},
value3: {
fontSize: 12,
padding: [0, -40, 0, -50],
fontWeight:700,
color: '#FFDC7B'
},
value4: {
fontSize: 12,
padding: [0, -40, 0, -30],
fontWeight:700,
color: '#E37C3E'
},
}
}
},
// 牵引线
labelLine: {
normal: {
show: true,
length: 15,
length2: 75,
}
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
data: [
{ value: 20, name: '零食' },
{ value: 40, name: '薯片'},
{ value: 45, name: '饮料' },
{ value: 10, name: '其他' },
]
},
//外边框
{
name: '外边框',
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['75%', '75%'],
label: {
normal: {
show: false
}
},
data: [{
value: 0,
name: '',
itemStyle: {
normal: {
borderWidth: 3,
borderColor: 'rgba(181,221,216,.38)'
}
}
}]
},
//内边框（虚线框）
{
type: 'gauge',
radius: '55%',
clockwise: true,
startAngle: '90', //重要，删除就没效果
endAngle: '-269.9999', //重要，删除就没效果
splitNumber: 90, //线的条数
pointer: {
show: false
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
splitLine: {
show: true,
length: 4,
lineStyle: {
color: '#B5DDD8',
width: 1
}
},
axisLabel: {
show: false
}
},
]
};