200 lines
4.5 KiB
Vue
200 lines
4.5 KiB
Vue
<template>
|
|
<!-- <div>
|
|
<div class="quipmentManager1"> -->
|
|
<div id="maintenanceStatisticsEcharts"></div>
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "maintenanceStatisticsEcharts",
|
|
props: {
|
|
maintenanceStatisticsEchartsData: {
|
|
// default: () => false,
|
|
// type: [Array, Boolean],
|
|
// required: true
|
|
type: Object, // 类型
|
|
required: true,// 必要性
|
|
default: 'cess'// 默认值
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch:{
|
|
maintenanceStatisticsEchartsData:{
|
|
handler:function(newV){
|
|
this.getLoadEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts()
|
|
console.log("maintenanceStatisticsEchartsData",this.maintenanceStatisticsEchartsData)
|
|
},
|
|
methods: {
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById("maintenanceStatisticsEcharts")
|
|
);
|
|
var option = {
|
|
title: [
|
|
{
|
|
text: this.maintenanceStatisticsEchartsData,
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
fontSize: 25,
|
|
color: "rgb(0,228,231)",
|
|
foontWeight: "200",
|
|
// background: 'rgba(9,119,150,0.3)',
|
|
},
|
|
},
|
|
],
|
|
grid: {
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
},
|
|
tooltip: {
|
|
show: false,
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
top: "5%",
|
|
left: "center",
|
|
},
|
|
color: ["rgb(0,228,231)"],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["58%", "45%"],
|
|
silent: true,
|
|
clockwise: true,
|
|
startAngle: 90,
|
|
// endAngle: 10000,
|
|
z: 0,
|
|
zlevel: 0,
|
|
label: {
|
|
normal: {
|
|
position: "center",
|
|
},
|
|
},
|
|
// axisTick: {
|
|
// length: 10,
|
|
// splitNumber: 9,
|
|
// lineStyle: {
|
|
// color: "#ffffff",
|
|
// width: 1,
|
|
// },
|
|
// },
|
|
data: [
|
|
{
|
|
value: 100,
|
|
name: "",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ACD735",
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 50,
|
|
name: "",
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
{
|
|
name: "",
|
|
type: "gauge",
|
|
radius: "60%",
|
|
center: ["50%", "50%"],
|
|
startAngle: 0,
|
|
endAngle: 359.9,
|
|
splitNumber: 70,
|
|
hoverAnimation: true,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
length: 60,
|
|
lineStyle: {
|
|
width: 5,
|
|
color: "rgb(8,46,52)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
},
|
|
pointer: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
opacity: 0,
|
|
},
|
|
},
|
|
detail: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 0,
|
|
name: "",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
startAngle: 80,
|
|
legendHoverLink: false,
|
|
radius: ["40%"],
|
|
hoverAnimation: false,
|
|
animation: false,
|
|
center: ["50%", "50%"],
|
|
itemStyle: {
|
|
color: "rgba(9,119,150,0)",
|
|
borderColor: "rgb(103,221,216)",
|
|
},
|
|
data: [1],
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quipmentManager1 {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
#maintenanceStatisticsEcharts {
|
|
/* width: 100%;
|
|
height: 150px; */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|