smart-power-ui/src/views/iot/project/profileV2/EEchartsGauge.vue

149 lines
3.1 KiB
Vue

<template>
<div class="bigscreen-echarts-gauge">
<div :id="eId" :style="styles"></div>
</div>
</template>
<script>
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
export default {
name: "echartsRadarWrap",
props: {
eId: {
type: String
},
styles: {
type: String
},
colorList: {
type: [Array, String],
default: ["#27d0ec"]
},
option: {
stype: Number,
default: 0
}
},
data() {
return {
chart: null
};
},
created() {
this.chart = null;
echarts.use([GaugeChart, CanvasRenderer]);
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
if (!this.chart) {
this.chart = echarts.init(document.getElementById(this.eId));
}
const options = {
series: [
{
type: "gauge",
color: this.colorList,
min: 0,
max: 100,
progress: {
show: true,
width: 3
},
axisLine: {
lineStyle: {
width: 3
}
},
axisTick: {
show: false
},
splitLine: {
distance: 2,
length: '3',
lineStyle: {
width: 1,
color: '#dcdcdc'
}
},
axisLabel: {
distance: 7,
color: '#999',
fontSize: 5
},
pointer: {
offsetCenter: [0, '0%'],
length: '60%',
width: '1',
itemStyle: {
// color: '#000'
}
},
anchor: {
show: true,
showAbove: true,
size: 6,
itemStyle: {
borderWidth: 1
}
},
title: {
show: false,
text: "今日报警"
},
grid: {
left: "10",
right: "10",
bottom: "5",
top: 50,
containLabel: true,
},
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
width: 4,
// color: [
// [1, "#1A3F81"]
// ]
}
},
detail: {
color: this.colorList[0] || "#27d0ec",
valueAnimation: true,
fontSize: 18,
offsetCenter: ['0', '80%']
},
data: [
{
value: this.option
}
]
}
]
};
this.chart.setOption(options);
}
},
watch: {
option(val, oldVal) {
this.chart = null;
this.drawLine();
}
}
};
</script>
<style lang="scss">
.bigscreen-echarts-gauge {
height: calc(100% - 30px);
height: calc(100% - 15px);
width: 100%;
display: flex;
justify-content: center;
}
</style>