drawLine () {
window.addEventListener('resize', this.drawLine)
let myChart = this.$echarts.init(this.$refs.echarts)
var data = {
'name': '合同信息',
'value': [35],
'nAmount': 1566557.14
}
var color = ['#0662AB', '#0662AB', '#0662AB']
var option = {
title: {
text: data.value[0] + '%',
textStyle: {
color: color[2],
fontSize: 28
},
itemGap: 20,
left: 'center',
top: 'center'
},
tooltip: {
formatter: function (params) {
return '<span style="color: #fff;">占比:' + params.value + '%</span>'
}
},
angleAxis: {
max: 100,
clockwise: false, // 逆时针
// 隐藏刻度线
show: false,
startAngle: 110,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
polar: {
radius: ['60%', '80%'],
center: ['50%', '50%']
},
series: [
{
name: '小环',
type: 'gauge',
splitNumber: 20,
radius: '90%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9999,
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#264179',
width: 1,
shadowBlur: 1,
shadowColor: '#06579D'
},
length: 4,
splitNumber: 5
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
name: '小环',
type: 'gauge',
splitNumber: 20,
radius: '50%',
center: ['50%', '50%'],
startAngle: 0,
endAngle: 359.9999,
axisLine: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: '#264179',
width: 1,
shadowBlur: 1,
shadowColor: '#06579D'
},
length: 4,
splitNumber: 5
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
detail: {
show: false
}
},
{
type: 'pie',
name: '内层细圆环',
radius: ['65%', '75%'],
startAngle: 110,
hoverAnimation: false,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: '#264179'
}, {
offset: 1,
color: '#264179'
}]),
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [50]
},
{
type: 'bar',
z: 10,
data: data.value,
showBackground: false,
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
itemStyle: {
normal: {
opacity: 1,
color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
offset: 0,
color: '#00CBFD'
}, {
offset: 1,
color: '#0771B1'
}]),
shadowBlur: 5,
shadowColor: '#2A95F9',
}
},
},
]
}
myChart.clear()
myChart.resize()
myChart.setOption(option)
}