<template>
<div class="layout">
<div id="main" style="height:15rem; width:15rem"></div>
</div>
</template>
<script>
module.exports = {
props: {
name: { type: String },
numer: { type: Number }
},
data: function() {
return {
option: (option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
series: [
{
type: "gauge",
min: 0,
max: 100,
splitNumber: 10, // 分割段数，默认为5
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [[0.2, "#228b22"], [0.8, "#48b"], [1, "#ff4500"]],
width: 8
}
},
axisTick: {
// 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length: 12, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
color: "auto"
}
},
axisLabel: {
// 坐标轴文本标签，详见axis.axisLabel
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: "auto"
}
},
splitLine: {
// 分隔线
show: true, // 默认显示，属性show控制显示与否
length: 15, // 属性length控制线长
lineStyle: {
color: "auto"
}
},
//指针大小
pointer: {
width: 5
},
title: {
show: true,
offsetCenter: [0, "-20%"], // x, y，单位px
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: "bolder"
color: "#fff"
}
},
detail: {
formatter: "{value}%",
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: "auto",
//设置文字大小
fontSize: 25,
fontWeight: "bold"
}
},
data: [{ value: 0, name: "未定义" }]
}
]
})
};
},
mounted() {
this.init();
},
methods: {
init() {
var myChart = echarts.init(document.getElementById("main"));
console.log("执行："+this.name );
this.option.series[0].data = [{ value: this.numer, name: this.name }];
myChart.setOption(this.option);
},
clickBtn: function() {
console.log(this.value1);
},
ChangeState: function() {
this.$emit("ChangeStateEvent");
}
}
};
</script>
<style scoped>
.layout {
position: fixed;
width: 100%;
height: 90%;
background: url(../../img/background-bg.jpg) no-repeat;
background-attachment: fixed;
background-size: 100%100%;
overflow: -Scroll;
overflow-x: hidden;
}
._layout {
margin-left: 5rem;
height: 4rem;
line-height: 4rem;
display: flex;
word-wrap: break-word;
}
</style>