235 lines
4.3 KiB
Vue
235 lines
4.3 KiB
Vue
<template>
|
||
<div class="gas-chart"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
import resize from './../mixins/resize'
|
||
|
||
export default {
|
||
name: 'GasChart',
|
||
mixins: [resize],
|
||
components: {},
|
||
props: {
|
||
chartType: '',
|
||
chartTime: ''
|
||
},
|
||
data() {
|
||
const colors = [
|
||
'#12FFF5',
|
||
'#2760FF',
|
||
'#FFD160',
|
||
'#E80091',
|
||
'#8064ff',
|
||
'#ff8a3b',
|
||
'#8cd26d',
|
||
'#2aa1ff',
|
||
];
|
||
return {
|
||
chart: null
|
||
};
|
||
},
|
||
computed: {
|
||
gasChartDayTrend() {
|
||
return this.$store.state.websocket.gasChartDayTrend
|
||
},
|
||
gasChartWeekTrend() {
|
||
return this.$store.state.websocket.gasChartWeekTrend
|
||
},
|
||
gasChartMonthTrend() {
|
||
return this.$store.state.websocket.gasChartMonthTrend
|
||
},
|
||
gasChartYearTrend() {
|
||
return this.$store.state.websocket.gasChartYearTrend
|
||
}
|
||
},
|
||
watch: {
|
||
gasChartDayTrend: {
|
||
handler(newVal, oldVal) {
|
||
if (this.chartTime === '日') {
|
||
this.updateChart()
|
||
}
|
||
}
|
||
},
|
||
gasChartWeekTrend: {
|
||
handler(newVal, oldVal) {
|
||
if (this.chartTime === '周') {
|
||
this.updateChart()
|
||
}
|
||
}
|
||
},
|
||
gasChartMonthTrend: {
|
||
handler(newVal, oldVal) {
|
||
if (this.chartTime === '月') {
|
||
this.updateChart()
|
||
}
|
||
}
|
||
},
|
||
gasChartYearTrend: {
|
||
handler(newVal, oldVal) {
|
||
if (this.chartTime === '年') {
|
||
this.updateChart()
|
||
}
|
||
}
|
||
},
|
||
chartType: {// 监听类型变化，更新图
|
||
handler(newVal, oldVal) {
|
||
this.updateChart()
|
||
}
|
||
},
|
||
chartTime: {// 监听时间变化，更新图
|
||
handler(newVal, oldVal) {
|
||
this.updateChart()
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$el.addEventListener('resize', () => {
|
||
console.log('resziing.....');
|
||
});
|
||
this.updateChart()
|
||
},
|
||
methods: {
|
||
updateChart() {
|
||
let gasName = ''
|
||
const colors = ['#FFCB59'];
|
||
let temp1 = []
|
||
let temp2 = []
|
||
let seriesData = []
|
||
let xData = []
|
||
let yData = []
|
||
switch (this.chartTime) {
|
||
case '日':{
|
||
temp1 = this.gasChartDayTrend
|
||
break;
|
||
}
|
||
case '周':{
|
||
temp1 = this.gasChartWeekTrend
|
||
break;
|
||
}
|
||
case '月':{
|
||
temp1 = this.gasChartMonthTrend
|
||
break;
|
||
}
|
||
case '年':{
|
||
temp1 = this.gasChartYearTrend
|
||
break;
|
||
}
|
||
default:
|
||
}
|
||
switch (this.chartType) {
|
||
case '氧气含量':{
|
||
temp2 = temp1?.O2_float || []
|
||
break;
|
||
}
|
||
case '二氧化硫':{
|
||
temp2 = temp1?.SO2_float || []
|
||
break;
|
||
}
|
||
case '一氧化氮':{
|
||
temp2 = temp1?.NOX_float || []
|
||
break;
|
||
}
|
||
case '颗粒物':{
|
||
temp2 = temp1?.dust_float || []
|
||
break;
|
||
}
|
||
default:
|
||
}
|
||
temp2.length > 0 && temp2.map(i => {
|
||
xData.push(i.time)
|
||
yData.push(i.value)
|
||
})
|
||
if (yData.length == 0) {
|
||
seriesData = []
|
||
}else {
|
||
seriesData = [{
|
||
name: gasName,
|
||
data: yData,
|
||
type: "line",
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#FFCB59' + "40" },
|
||
{ offset: 0.5, color: '#FFCB59' + "20" },
|
||
{ offset: 1, color: '#FFCB59' + "00" },
|
||
]),
|
||
},
|
||
lineStyle: {
|
||
width: 1
|
||
},
|
||
symbolSize: 1,
|
||
emphasis: {
|
||
focus: 'series'
|
||
}
|
||
}]
|
||
|
||
}
|
||
// 绘图
|
||
if (
|
||
this.chart !== null &&
|
||
this.chart !== '' &&
|
||
this.chart !== undefined
|
||
) {
|
||
this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
|
||
}
|
||
this.chart = echarts.init(this.$el);
|
||
var option = {
|
||
color: colors,
|
||
grid: { top: 32, right: 12, bottom: 20, left: 48 },
|
||
xAxis: {
|
||
type: 'category',
|
||
data: xData,
|
||
axisLabel: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
},
|
||
axisTick: { show: false },
|
||
axisLine: {
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#213259',
|
||
},
|
||
},
|
||
},
|
||
yAxis: {
|
||
name: '单位m³/h',
|
||
nameTextStyle: {
|
||
color: '#fff',
|
||
fontSize: 10,
|
||
align: 'right',
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#fff',
|
||
fontSize: 12,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#213259',
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#213259a0',
|
||
},
|
||
},
|
||
},
|
||
series: seriesData,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
}
|
||
option && this.chart.setOption(option)
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.gas-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|