drawLine () {
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var echartData = [
{
value: 2154,
name: '学一联中心站',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(52, 165, 217, 1)'
},
{
offset: 1,
color: 'rgba(35, 210, 197, 1)'
}
]
)
}
}
},
{
value: 3854,
name: '学三脱中心站',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(0, 204, 255, 1)'
},
{
offset: 1,
color: 'rgba(7, 110, 175, 1)'
}
]
)
}
}
},
{
value: 3515,
name: '学三注中心站',
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: 'rgba(56, 172, 247, 1)'
},
{
offset: 1,
color: 'rgba(1, 66, 230, 1)'
}
]
)
}
}
}]
var center = ['30%', '50%']
var option = {
title: {
text: '30',
textStyle: {
color: 'rgba(1, 221, 237, 1)',
fontSize: 28,
align: 'center'
},
x: '25%',
y: 'center'
},
legend: {
orient: 'vertical',
x: '65%',
y: 'center',
itemWidth: 15,
itemHeight: 15,
textStyle: {
color: 'rgba(168, 230, 243, 1)'
},
itemGap: 20,
data: ['学一联中心站', '学三脱中心站', '学三注中心站']
},
series: [
{
// name: '学一联中心站',
type: 'pie',
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#030d22'
}
},
center: center,
radius: ['65%', '90%'],
hoverAnimation: false,
color: ['rgba(36, 209, 198, 1)', 'rgba(0, 201, 253, 1)', 'rgba(3, 70, 231, 1)'],
label: {
show: false,
},
labelLine: {
show: false,
},
data: echartData
},
{
name: '小环',
type: 'gauge',
splitNumber: 10,
radius: '60%',
center: center,
startAngle: 0,
endAngle: 359.9999,
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#0F275F',
width: 1
},
length: 1,
splitNumber: 10
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
type: 'pie',
name: '饼状背景',
radius: ['0%', '50%'],
center: center,
startAngle: 110,
hoverAnimation: false,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: '#0B1C44'
}, {
offset: 1,
color: '#0B1C44'
}]),
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [50]
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
}