212 lines
4.8 KiB
Vue
212 lines
4.8 KiB
Vue
<template>
|
|
<!-- <div>
|
|
<div class="quipmentManager1"> -->
|
|
<div id="faultAnalysis"></div>
|
|
<!-- </div>
|
|
</div> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "faultAnalysis",
|
|
props: {
|
|
faultAnalysisDataYdata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true,
|
|
},
|
|
faultAnalysisDataXdata: {
|
|
default: () => false,
|
|
type: [Array, Boolean],
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {
|
|
faultAnalysisDataYdata: {
|
|
handler: function (newV) {
|
|
this.getLoadEcharts();
|
|
},
|
|
},
|
|
faultAnalysisDataXdata: {
|
|
handler: function (newV) {
|
|
this.getLoadEcharts();
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts();
|
|
console.log("faultAnalysisData", this.faultAnalysisDataYdata);
|
|
console.log("faultAnalysisDataXdata", this.faultAnalysisDataXdata);
|
|
},
|
|
methods: {
|
|
getLoadEcharts() {
|
|
var myChart = this.$echarts.init(
|
|
document.getElementById("faultAnalysis")
|
|
);
|
|
var option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
},
|
|
color: ["#52F478"],
|
|
icon: "circle",
|
|
// legend: {
|
|
// show: false,
|
|
// x: "580px",
|
|
// y: "30px",
|
|
// data: [
|
|
// {
|
|
// name: "name1",
|
|
// icon: "none",
|
|
// },
|
|
// {
|
|
// name: "name2",
|
|
// icon: "none",
|
|
// },
|
|
// {
|
|
// name: "name3",
|
|
// icon: "none",
|
|
// },
|
|
// {
|
|
// name: "name4",
|
|
// icon: "none",
|
|
// },
|
|
// ],
|
|
// textStyle: {
|
|
// fontSize: 14, //字体大小
|
|
// color: "#BBF6FF", //字体颜色
|
|
// },
|
|
// selectedMode: "single",
|
|
// },
|
|
grid: {
|
|
// top: "10px",
|
|
left: "13%", //默认10%
|
|
right: "4%", //默认10%
|
|
bottom: "8%", //默认60
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
name: "",
|
|
nameGap: "16",
|
|
show: true,
|
|
boundaryGap: "1%",
|
|
offset: 18,
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: "#FFFFFF",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#BBF6FF",
|
|
width: 2,
|
|
},
|
|
symbol: ["none", "arrow"],
|
|
},
|
|
data: this.faultAnalysisDataXdata,
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "单位:次",
|
|
show: true,
|
|
offset: 18,
|
|
nameTextStyle: {
|
|
color: "#ffffff",
|
|
padding: [0, 10, 0, 0],
|
|
// verticalAlign: 'top'
|
|
align: "right",
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
axisTick: {
|
|
//y轴刻度线
|
|
show: false,
|
|
},
|
|
splitArea: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgb(13,190,196)",
|
|
width: 1,
|
|
type: "dashed",
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "rgb(8,99,116)",
|
|
width: 1,
|
|
},
|
|
symbol: ["none", "arrow"],
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
smooth: true,
|
|
symbol: "rect",
|
|
symbolSize: 10,
|
|
data: this.faultAnalysisDataYdata,
|
|
itemStyle: {
|
|
color: "rgb(102,221,217)",
|
|
width: 3,
|
|
},
|
|
// markPoint: {
|
|
// show: false,
|
|
// },
|
|
// itemStyle: {
|
|
// normal: {
|
|
// color: "#52F478",
|
|
// borderColor: "#52F478", //拐点边框颜色
|
|
|
|
// lineStyle: {
|
|
// color: "#52F478", //折线颜色
|
|
// },
|
|
// label: { show: false, color: "#ffffff" },
|
|
// },
|
|
// },
|
|
},
|
|
],
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.quipmentManager1 {
|
|
width: 100%;
|
|
height: 150px;
|
|
}
|
|
|
|
#faultAnalysis {
|
|
/* width: 100%;
|
|
height: 150px; */
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|