drawLine () {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var chartdata = [
{
name: '男性',
value: 30,
},
{
name: '女性',
value: 50,
}
]
var radius = ['60%', '70%']
var color = ['#37FFC9', '#FFE777', '#19D6FF', '#32A1FF', '#cccccc', '#ff1111']
let color1 = [],
color2 = [],
color3 = []
color.forEach((item) => {
color1.push(item, 'transparent')
color2.push(hexToRgba(item, 0.7), 'transparent')
color3.push(hexToRgba(item, 0.4), 'transparent')
})
let data1 = []
let sum = 0
chartdata.forEach((item) => {
sum += Number(item.value)
})
chartdata.forEach((item, index) => {
if (item.value !== 0) {
data1.push(item, {
name: '',
value: sum / 70,
labelLine: {
show: false,
lineStyle: {
color: 'transparent',
},
},
itemStyle: {
color: 'transparent',
},
})
}
})
let radius2 = [Number(radius[1].split('%')[0]) + 0 + '%', Number(radius[1].split('%')[0]) + 4 + '%']
let radius3 = [Number(radius[1].split('%')[0]) + 4 + '%', Number(radius[1].split('%')[0]) + 8 + '%']
var option = {
grid: {
top: 0,
bottom: 0,
left: 0,
right: 0,
containLabel: true,
},
tooltip: {
formatter: (params) => {
if (params.name !== '') {
return params.name + ' : ' + params.value + '\n' + '(' + params.percent + '%)'
}
},
},
series: [
// 最外层圆环
{
type: 'pie',
radius: radius3,
center: ['50%', '50%'],
hoverAnimation: false,
startAngle: 90,
selectedMode: 'single',
selectedOffset: 0,
itemStyle: {
normal: {
color: (params) => {
return color1[params.dataIndex]
},
},
},
label: {
show: true,
normal: {
position: 'outside',
fontSize: FontChart(14),
color: '#fff',
formatter: (params) => {
console.log(params)
console.log(1)
if (params.dataIndex == 0 || params.dataIndex == 2) {
return params.name + '\n' + params.value
}
}
}
},
labelLine: {
show: false,
length: 10,
length2: 10,
lineStyle: {
color: '#fff',
width: 2,
},
},
data: data1,
z: 666,
},
{
type: 'pie',
radius: radius2,
center: ['50%', '50%'],
hoverAnimation: false,
startAngle: 90,
selectedMode: 'single',
selectedOffset: 0,
itemStyle: {
normal: {
color: (params) => {
return color2[params.dataIndex]
},
},
},
label: {
show: false,
formatter: '{b}' + ' ' + '{c}',
},
data: data1,
z: 666,
},
{
type: 'pie',
radius: radius,
center: ['50%', '50%'],
hoverAnimation: false,
startAngle: 90,
selectedMode: 'single',
selectedOffset: 0,
itemStyle: {
normal: {
color: (params) => {
return color3[params.dataIndex]
},
},
},
label: {
show: false,
formatter: '{b}' + ' ' + '{c}',
},
data: data1,
z: 666,
},
],
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
},