drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var dataList = []
this.list.forEach((type, index) => {
var data = {
value: type.num,
show: true,
name: type.alarmDescId,
itemStyle: {
normal: {
color: this.color[index],
borderWidth: FontChart(2),
borderColor: '#06264C'
}
}
}
dataList.push(data)
});
var option = {
// title: {
// text: '单位:%',
// x: FontChart(20),
// y: FontChart(20),
// textStyle: {
// color: "#fff",
// fontSize: FontChart(16)
// }
// },
legend: {
orient: 'vertical',
top: 'center',
right: '10',
itemGap: FontChart(10),
itemWidth: FontChart(10),
itemHeight: FontChart(10),
formatter: ["{a|{name}}"].join("\n"),
width: '10%',
show: false,
textStyle: {
color: 'rgba(190, 198, 218, 1)',
rich: {
a: {
fontSize: FontChart(16),
width: FontChart(40)
}
}
}
},
series: [
{
name: '',
type: 'pie',
roseType: 'area',
radius: ['20%', '50%'],
center: ['50%', '50%'],
avoidLabelOverlap: true,
minAngle: 10,// 设置每块扇形的最小占比
hoverAnimation: false,
silent: true,
label: {
show: true,
position: 'outside',
formatter: function (res) {
return res.name + ' ' + res.percent + "%"
},
color: '#fff',
fontSize: FontChart(14)
},
labelLine: {
show: true,
// length: FontChart(40),
// length2: FontChart(10)
},
data: dataList
},
{
type: 'pie',
silent: true,
center: ['50%', '50%'],
radius: ['0%', '50%'],
z: 1,
itemStyle: {
normal: {
color: '#02224d'
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [100]
},
{
type: 'pie',
silent: true,
center: ['50%', '50%'],
radius: ['54%', '55%'],
z: 1,
itemStyle: {
normal: {
color: '#053165'
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [100]
},
{
type: 'pie',
silent: true,
center: ['50%', '50%'],
radius: ['14%', '15%'],
z: 2,
itemStyle: {
normal: {
color: '#053165'
},
emphasis: {
label: {
show: false
},
areaColor: 'rgba(255, 255, 255, .1)',
}
},
label: {
normal: {
show: false
},
},
labelLine: {
normal: {
show: false
}
},
data: [100]
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},