137 lines
3.2 KiB
Vue
137 lines
3.2 KiB
Vue
<template>
|
|
<!-- <div>
|
|
<div class="quipmentManager1"> -->
|
|
<div id="healthIndex"></div>
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "healthIndex",
|
|
props: {
|
|
healthIndexData: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch:{
|
|
healthIndexData:{
|
|
handler:function(newV){
|
|
this.getLoadEcharts()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts()
|
|
console.log("healthIndex",this.healthIndexData)
|
|
},
|
|
methods: {
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById("healthIndex")
|
|
);
|
|
var option = {
|
|
title: {
|
|
show: false,
|
|
text: "Referer of a Website",
|
|
subtext: "Fake Data",
|
|
left: "center",
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
},
|
|
legend: {
|
|
show: false,
|
|
// orient: "vertical",
|
|
bottom: "bottom",
|
|
icon: "rect",
|
|
itemWidth: 15,
|
|
itemHeight: 15,
|
|
orient: "horizontal",
|
|
textStyle: {
|
|
// fontSize: 18, //字体大小
|
|
color: "#ffffff", //字体颜色
|
|
},
|
|
},
|
|
color:["rgb(149,224,71)","rgb(217,237,253)","rgb(163,213,251)"],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "pie",
|
|
radius: "50%",
|
|
data: this.healthIndexData,
|
|
// [
|
|
// {
|
|
// value: 1048,
|
|
// name: "项目检修保养",
|
|
// itemStyle: { color: "rgb(149,224,71)" },
|
|
// },
|
|
// {
|
|
// value: 735,
|
|
// name: "三级维修保养",
|
|
// itemStyle: { color: "rgb(217,237,253)" },
|
|
// },
|
|
// {
|
|
// value: 800,
|
|
// name: "深度检修保养",
|
|
// itemStyle: { color: "rgb(163,213,251)" },
|
|
// },
|
|
// {
|
|
// value: 600,
|
|
// name: "常规清洗",
|
|
// itemStyle: { color: "rgb(73,157,187)" },
|
|
// },
|
|
// {
|
|
// value: 900,
|
|
// name: "年度检修保养",
|
|
// itemStyle: { color: "rgb(150,223,72)" },
|
|
// },
|
|
// {
|
|
// value: 700,
|
|
// name: "日常保养",
|
|
// itemStyle: { color: "rgb(92,200,158)" },
|
|
// },
|
|
// ],
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}",
|
|
},
|
|
itemStyle: {
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
borderWidth: 3,
|
|
borderColor: "rgb(9,62,70)",
|
|
opacity: 0.7,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quipmentManager1 {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
#healthIndex {
|
|
/* width: 100%;
|
|
height: 150px; */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|