drawLine() {
var that = this
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var plantCap = [{
name: '21-25岁',
value: '12133'
}, {
name: '31-35岁',
value: '15989'
}, {
name: '41-50岁',
value: '19844'
}, {
name: '26-30岁',
value: '15371'
}, {
name: '20岁及以下',
value: '3575'
}, {
name: '50岁以上',
value: '15944'
}, {
name: '36-40岁',
value: '11854'
}];
var datalist = [{
offset: [10, 20],
symbolSize: 100,
opacity: .95,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#29c0fb'
}, {
offset: 1,
color: '#2dc5b9'
}]),
}, {
offset: [20, 70],
symbolSize: 95,
opacity: .95,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#35d17e'
}, {
offset: 1,
color: '#49ddb2'
}]),
}, {
offset: [48, 80],
symbolSize: 90,
opacity: .95,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#e5d273'
}, {
offset: 1,
color: '#e4a37f'
}]),
}, {
offset: [40, 20],
symbolSize: 90,
opacity: .95,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#29c0fb'
}, {
offset: 1,
color: '#2dc5b9'
}]),
}, {
offset: [65, 50],
symbolSize: 65,
opacity: .95,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#35d17e'
}, {
offset: 1,
color: '#49ddb2'
}]),
}, {
offset: [80, 80],
symbolSize: 68,
opacity: .7,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#e5d273'
}, {
offset: 1,
color: '#e4a37f'
}]),
}, {
offset: [80, 20],
symbolSize: 65,
opacity: .68,
color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#29c0fb'
}, {
offset: 1,
color: '#2dc5b9'
}]),
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.name + '\n' + item.value,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 13,
lineHeight: 17,
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
var option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 120,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: '20'
}
},
},
itemStyle: {
normal: {
color: '#00acea'
}
},
data: datas
}]
};
myChart.clear()
myChart.resize()
myChart.setOption(option)
},