|
|
@@ -3,8 +3,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, onMounted, watch, reactive } from 'vue'
|
|
|
-import { plainOptions, } from '../connectAnalysis.data'
|
|
|
+import { ref, nextTick, onMounted, watchEffect } from 'vue'
|
|
|
+import { plainOptions, echartColor } from '../connectAnalysis.data'
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
let props = defineProps({
|
|
|
@@ -17,177 +17,435 @@ let props = defineProps({
|
|
|
})
|
|
|
//获取dom元素节点
|
|
|
let line = ref<any>();
|
|
|
-let myChart = ref()
|
|
|
-let option = reactive({})
|
|
|
|
|
|
-function initSeries(param) {
|
|
|
- if (param.length) {
|
|
|
- let data = param.map(el => {
|
|
|
- let seriesD = plainOptions.find(v => v.value == el.label)
|
|
|
- return {
|
|
|
- name: seriesD['label'],
|
|
|
- type: 'line',
|
|
|
- stack: '',
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 0,
|
|
|
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: seriesD['color'],
|
|
|
+
|
|
|
+function getOption(param) {
|
|
|
+ nextTick(() => {
|
|
|
+ let myChart = echarts.init(line.value);
|
|
|
+ let option = {
|
|
|
+ grid: {
|
|
|
+ left: '2%',
|
|
|
+ right: '8%',
|
|
|
+ top: '6%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
+ textStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ color: '#74767b'
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#3173f0',
|
|
|
+ width: 1, // 线的宽度
|
|
|
+ type: 'dashed' // 线的类型为虚线
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: 'rgba(209, 229, 253)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: param.xData || []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'ppm',
|
|
|
+ position: 'left', // Y轴1在左边
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#74767b',
|
|
|
+ fontSize: 14,
|
|
|
+ lineHeight: 10,
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ // max: 1000,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ textStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
lineStyle: {
|
|
|
- color: seriesD['color'],
|
|
|
- width: 1
|
|
|
- },
|
|
|
- areaStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: seriesD['areaColor'][0],
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: seriesD['areaColor'][1],
|
|
|
- }]),
|
|
|
+ type: 'dashed',
|
|
|
+ color: 'rgba(209, 229, 253)'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- data: el.value.map(v => v[el.label])
|
|
|
- }
|
|
|
- })
|
|
|
- return data
|
|
|
- }
|
|
|
-}
|
|
|
-function getOption() {
|
|
|
- myChart.value = echarts.init(line.value);
|
|
|
- myChart.value.setOption(option);
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-function updateEchart(param) {
|
|
|
- let opt = {
|
|
|
- grid: {
|
|
|
- left: '2%',
|
|
|
- right: '2%',
|
|
|
- top: '6%',
|
|
|
- bottom: '2%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- backgroundColor: 'rgba(0, 0, 0, .6)',
|
|
|
- textStyle: {
|
|
|
- color: '#fff',
|
|
|
- fontSize: 12,
|
|
|
- },
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- boundaryGap: false,
|
|
|
- axisLabel: {
|
|
|
- color: '#74767b',
|
|
|
- overflow: 'truncate',
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#3173f0',
|
|
|
- width: 1, // 线的宽度
|
|
|
- type: 'dashed' // 线的类型为虚线
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '%',
|
|
|
+ position: 'right', // Y轴2在右边
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ textStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: 'rgba(209, 229, 253)'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '℃',
|
|
|
+ position: 'right', // Y轴2在右边
|
|
|
+ offset: 80,
|
|
|
+ min: 0,
|
|
|
+ // max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ textStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: 'rgba(209, 229, 253)'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- color: 'rgba(209, 229, 253)'
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: 'kPa',
|
|
|
+ position: 'right', // Y轴2在右边
|
|
|
+ offset: 160,
|
|
|
+ min: 0,
|
|
|
+ // max: 100,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}',
|
|
|
+ textStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#74767b'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: 'rgba(209, 229, 253)'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
- data: param.xData || []
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: 'ppm',
|
|
|
- nameTextStyle: {
|
|
|
- color: '#74767b',
|
|
|
- fontSize: 14,
|
|
|
- lineHeight: 10,
|
|
|
+ ],
|
|
|
+
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'CO浓度(ppm)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#3bd97a',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#3bd97a",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(59, 217, 122,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(59, 217, 122,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ markPoint: {
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#3bd97a'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: param.yData.find(v => v.label == 'coVal') ? param.yData.find(v => v.label == 'coVal').value.map(el => el['coVal']) : []
|
|
|
},
|
|
|
- min: 0,
|
|
|
- // max: 1000,
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value}',
|
|
|
- textStyle: {
|
|
|
- color: '#74767b'
|
|
|
- }
|
|
|
+ {
|
|
|
+ name: 'CH4浓度(%)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#f9c74a',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f9c74a",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(249, 199, 74,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(249, 199, 74,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: param.yData.find(v => v.label == 'ch4Val') ? param.yData.find(v => v.label == 'ch4Val').value.map(el => el['ch4Val']) : []
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#27b4c2'
|
|
|
- }
|
|
|
+ {
|
|
|
+ name: 'C2H4浓度(ppm)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ac7bf1',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ac7bf1",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(172, 123, 241,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(172, 123, 241,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: param.yData.find(v => v.label == 'c2h4Val') ? param.yData.find(v => v.label == 'c2h4Val').value.map(el => el['c2h4Val']) : []
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
+ {
|
|
|
+ name: 'C2H2浓度(ppm)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#50b2f9',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#50b2f9",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(80, 178, 249,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(80, 178, 249,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: param.yData.find(v => v.label == 'c2h2Val') ? param.yData.find(v => v.label == 'c2h2Val').value.map(el => el['c2h2Val']) : []
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- color: 'rgba(209, 229, 253)'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '',
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- axisLabel: {
|
|
|
- formatter: '{value}',
|
|
|
- textStyle: {
|
|
|
- color: '#74767b'
|
|
|
- }
|
|
|
+ {
|
|
|
+ name: 'CO2浓度(%)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#1fd0da',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#1fd0da",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(31, 208, 218,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(31, 208, 218,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: param.yData.find(v => v.label == 'co2Val') ? param.yData.find(v => v.label == 'co2Val').value.map(el => el['co2Val']) : []
|
|
|
},
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#186afe'
|
|
|
- }
|
|
|
+ {
|
|
|
+ name: 'O2浓度(%)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#ff6666',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#ff6666",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(255, 102, 102,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255, 102, 102,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 1,
|
|
|
+ data: param.yData.find(v => v.label == 'o2Val') ? param.yData.find(v => v.label == 'o2Val').value.map(el => el['o2Val']) : []
|
|
|
},
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
+ {
|
|
|
+ name: '压差(kPa)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#3b4bd9',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#3b4bd9",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(59, 75, 217,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(59, 75, 217,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 3,
|
|
|
+ data: param.yData.find(v => v.label == 'sourcePressure') ? param.yData.find(v => v.label == 'sourcePressure').value.map(el => el['sourcePressure']) : []
|
|
|
},
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- color: 'rgba(209, 229, 253)'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- series: initSeries(param.yData)
|
|
|
- };
|
|
|
- option = Object.assign({}, opt)
|
|
|
- if (myChart.value) {
|
|
|
- myChart.value.setOption(option, true);
|
|
|
-
|
|
|
- }
|
|
|
+ {
|
|
|
+ name: '温度(℃)',
|
|
|
+ type: 'line',
|
|
|
+ stack: '',
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 0,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#f18736',
|
|
|
+ lineStyle: {
|
|
|
+ color: "#f18736",
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ //color: '#94C9EC'
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(241, 135, 54,0.1)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(241, 135, 54,0.8)'
|
|
|
+ }]),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxisIndex: 2,
|
|
|
+ data: param.yData.find(v => v.label == 'temperature') ? param.yData.find(v => v.label == 'temperature').value.map(el => el['temperature']) : []
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ dataZoom: [ // dataZoom 配置项
|
|
|
+ {
|
|
|
+ type: 'inside', // 这是滑动条类型的数据区域缩放组件。'slider' 是滑动条类型，还有一个是 'inside' 类型，是内置的缩放组件。
|
|
|
+ start: 10, // 数据窗口范围的起始百分比，默认为 0。即从哪个点开始缩放。
|
|
|
+ end: 100 // 数据窗口范围的结束百分比，默认为 100。即缩放到哪个点结束。
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function () {
|
|
|
+ myChart.resize();
|
|
|
+ };
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
-watch(() => props.echartData, (newV, oldV) => {
|
|
|
- updateEchart(newV)
|
|
|
-}, { deep: true })
|
|
|
+watchEffect(() => {
|
|
|
+ if (props.echartData.xData.length || props.echartData.yData.length) {
|
|
|
+ props.echartData && getOption(props.echartData)
|
|
|
+ }
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- getOption()
|
|
|
- window.onresize = function () {
|
|
|
- myChart.value.resize();
|
|
|
- };
|
|
|
})
|
|
|
|
|
|
</script>
|
