<template>
<chart style="width:100%; height:250px;"
ref="chart1"
:options="orgOptions"
:auto-resize="true"></chart>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'barChart2',
data () {
return {
orgOptions: {
}
}
},
methods: {
getInfoSucc () {
this.orgOptions = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
restore: {
},
saveAsImage: {
}
}
},
title: [{
//主机使用率的样式
x: 'center',
y: '70%',
text: '主机使用率',
textStyle: {
fontSize: 14,
color: '#0fd0ff',
},
}],
series: [
{
name: '业务指标',
type: 'gauge',
detail: {
//【90%】的样式
formatter: '{value}%',
offsetCenter: [0, "30%"],
textStyle: {
color: 'white',
fontSize: 20
},
},
pointer: {
width: 5, // 指针的宽度
length: "60%", // 指针长度，按照半圆半径的百分比
},
splitLine: {
// 分割线
length: 20, // 分割线长度
lineStyle: {
width: 1, // 分割线宽度
color: 'auto' // 分割线颜色，跟着仪表盘走
}
},
axisTick: {
// 刻度线
length: 15, // 刻度线长度
lineStyle: {
width: 1, // 分割线宽度
color: 'auto' // 分割线颜色，跟着仪表盘走
}
},
axisLine: {
lineStyle: {
color: [[0.2, '#3dccae'], [0.8, '#207ae8'], [1, '#f06e23']], // 改表盘颜色
width: 10, // 表盘粗细
}
},
data: [{
value: 90 }],
title: {
// 设置仪表盘中间显示文字样式
show: false
},
}
]
}
}
},
mounted () {
this.getInfoSucc()
}
}
</script>