<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 { title } from "process";
import { mapGetters } from "vuex";
export default {
mixins: [resize],
props: {
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
title: {
type: String,
default: "总数",
},
chartData: {
type: Object,
default: () => { },
},
},
computed: {
...mapGetters(["sideTheme"]),
},
watch: {
chartData: {
handler(newvalue) {
let data = Number(newvalue.max);
switch (true) {
case data > 0 && data <= 0.1:
this.range = { min: 0, max: 0.1 };
break;
case data <= 1:
this.range = { min: 0, max: 1 };
break;
case data <= 10:
this.range = { min: 0, max: 10 };
break;
case data <= 100:
this.range = { min: 0, max: 100 };
break;
default:
this.range = { min: 0, max: 1 };
}
},
deep: true,
immediate: true,
},
sideTheme: {
handler(newValue) {
// console.log(newValue);
if (newValue === "theme-dark") {
this.color = this.darkColor;
}
if (newValue === "normal-dark" || newValue === "theme-old") {
this.color = this.darkColor;
} else {
this.color = this.normalColor;
}
this.$forceUpdate();
},
immediate: true,
},
},
data() {
return {
chart: null,
range: {},
darkColor: {
textColor: "#fff",
// green: "#24d124",
green: "rgb(0,255,0,0.5)",
// red: "red",
red: "rgb(255,0,0,0.5)"
},
normalColor: {
textColor: "#303133",
green: "green",
red: "red",
},
color: {},
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
});
},
updated() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
let _this = this;
this.chart = echarts.init(this.$el);
let option = {
tooltip: {
confine: true,
formatter: function () {
console.log('液位的图表', _this.chartData);
let max = _this.chartData.max
? "<br />上限告警值：" + _this.chartData.max + _this.chartData.dw
: "";
let min = _this.chartData.min
? "<br />下限告警值：" + _this.chartData.min + _this.chartData.dw
: "";
return (
_this.chartData.time +
"<br />" +
_this.chartData.name +
":" +
_this.chartData.value +
_this.chartData.dw +
max +
min
);
},
textStyle: {
color: this.color.textColor,
},
},
title: {
text: this.chartData.name,
left: "center",
bottom: "10px",
textStyle: {
// color: this.color.textColor,
color: "rgb(255,255,255,.7)",
fontSize: "20",
fontWeight: 0
},
},
series: [
{
type: "gauge",
z: 3,
min: this.range.min,
max: this.range.max,
splitNumber: 5,
radius: "80%",
progress: {
color: 'FF0000',
show: true,
width: 15
},
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
这里有个坑，一开始没发现，
就是 this.chartData.min后端返回是0 然后他是false都是0.2这个数值，
所以仪表盘区间颜色呈现不对，返回是有值的，
那则和无值做比较，目前无论这个设置min是写还是不写默认都是0
所以就做一个null判断了
color: [
[
this.chartData.min != null && this.range.max
? this.chartData.min / this.range.max
: 0.2,
this.color.red,
],
[
this.chartData.max != null && this.range.max
? this.chartData.max / this.range.max
: 0.8,
this.color.green,
],
[1, this.color.red],
],
// [1, '#0b275B'] // 底色
width: 15,
},
},
axisTick: {
// 坐标轴小标记
length: 22, // 属性length控制线长
lineStyle: {
// 属性lineStyle控制线条样式
// color: "auto",
color: "rgb(255,255,255,.5)"
},
},
splitLine: {
// 分隔线
length: 20, // 属性length控制线长
lineStyle: {
// 属性lineStyle（详见lineStyle）控制线条样式
// color: "auto",
color: "rgb(255,255,255,.5)"
},
},
title: {
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
// fontWeight: "bolder",
fontSize: 15,
// color: this.color.textColor,
color: "rgb(255,255,255,.7)"
},
},
detail: {
textStyle: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: "bolder",
// color: '#FF0000'
},
},
data: [
{
value: (this.chartData.value) ? this.chartData.value : 0,
name: "水压/" + this.chartData.dw.substring(0, 1) + this.chartData.dw.substring(1, 2).toUpperCase() + this.chartData.dw.substring(2),
},
],
},
],
};
this.chart.setOption(option);
},
},
};
</script>
