<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
import { addClass } from "@/utils";
export default {
name: "electricfire",
mixins: [resize],
props: {
className: {
type: String,
default: "chart"
},
width: {
type: String,
default: "100%"
},
height: {
type: String,
default: "100%"
},
autoResize: {
type: Boolean,
default: true
},
chartData: {
type: Array,
required: true,
default: () => []
}
},
data() {
return {
chart: null
};
},
watch: {
chartData: {
deep: true,
handler(val) {
if (val.length) {
// console.log(val);
this.setOptions(val);
}
}
}
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, "macarons");
// this.setOptions(this.chartData)
},
setOptions(val) {
let option = {
tooltip: {
show: true,
trigger: "item",
formatter: function(params) {
console.log("s", params);
return (
params.name +
"\n" +
params.value +
" " +
val[params.dataIndex].typeCode
);
}
},
minInterval: 1,
grid: {
left: "10%",
right: "10%",
bottom: 20,
top: 30,
containLabel: true
},
xAxis: [
{
type: "category",
name: "时间",
axisLine: {
show: true
},
splitArea: {
// show: true,
color: "#666",
lineStyle: {
color: "#666"
}
},
// 数据倒叙
inverse: true,
axisLabel: {
color: "#666",
rotate: 45
},
splitLine: {
show: false
},
boundaryGap: false,
data: val.map(function(item) {
return item.collectTime;
})
}
],
yAxis: [
{
type: "value",
// max: this.max > val[0].maxAlarmValue ? this.max : val[0].maxAlarmValue,
max: function(value) {
console.log(value);
if (value.max > val[0].maxAlarmValue) {
return value.max;
} else if (!val[0].maxAlarmValue) {
return Math.ceil(value.max);
} else {
return val[0].maxAlarmValue;
}
},
// max: val[0].maxAlarmValue ? val[0].maxAlarmValue : null,
name: val[0].typeCode,
splitLine: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
},
axisTick: {
show: true,
lineStyle: {
color: "#666"
}
}
}
],
series: [
{
name: "",
type: "line",
smooth: false, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: "circle",
symbolSize: 10,
lineStyle: {
normal: {
color: "#000"
}
},
itemStyle: {
color: "#fff",
borderColor: "#3888fa",
borderWidth: 2
},
// minAngle: 5,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(56,136,250,0.3)"
},
{
offset: 1,
color: "rgba(56,136,250,0)"
}
],
false
)
}
},
markLine: {
silent: true,
symbol: "none",
label: {
position: "middle",
// formatter: () => '告警阈值' + val[0].maxAlarmValue + val[0].typeCode
formatter: function() {
return "告警阈值" + val[0].maxAlarmValue + val[0].typeCode;
}
},
lineStyle: {
color: "red",
type: "solid", //还有实线，
width: 1
},
symbol: "none", //去掉箭头
data: [
{
yAxis: val[0].maxAlarmValue ? val[0].maxAlarmValue : "null"
}
]
},
data: val.map(function(item) {
return item.deviceValue;
})
}
]
};
this.chart.setOption(option);
}
},
computed: {
max() {
return this.chartData
.map(function(item) {
return item.collectTime;
})
.sort(function(a, b) {
return b - a;
})[0];
}
}
};
</script>
