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 = {
legend: {
orient: 'vertical',
top: 'center',
right: '10',
itemGap: FontChart(10),
itemWidth: FontChart(10),
itemHeight: FontChart(10),
formatter: ["{a|{name}}"].join("\n"),
width: '10%',
textStyle: {
color: 'rgba(190, 198, 218, 1)',
rich: {
a: {
width: FontChart(40)
}
}
}
},
series: [
{
name: '',
type: 'pie',
radius: ['30%', '60%'],
center: ['30%', '50%'],
hoverAnimation: false,
avoidLabelOverlap: false,
label: {
show: true,
position: 'inside',
formatter: '{d}%',
color: '#fff',
fontSize: FontChart(14)
},
labelLine: {
show: false
},
data: dataList
},
{
type: 'pie',
silent: true,
center: ['30%', '50%'],
radius: ['0%', '65%'],
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: ['30%', '50%'],
radius: ['65%', '66%'],
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: ['30%', '50%'],
radius: ['25%', '26%'],
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)
},