fuguobin
1 year ago
10 changed files with 446 additions and 770 deletions
@ -1,202 +0,0 @@ |
|||||
<template> |
|
||||
<div class="details"> |
|
||||
<el-card class="search" shadow="always"> |
|
||||
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm"> |
|
||||
<el-form-item label="时间" prop="time"> |
|
||||
<el-date-picker |
|
||||
v-model="searchForm.time" |
|
||||
type="datetimerange" |
|
||||
start-placeholder="开始时间" |
|
||||
end-placeholder="结束时间" |
|
||||
:default-time="defaultTime1" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="颗粒度" prop="particle"> |
|
||||
<el-select v-model="searchForm.particle" placeholder="请选择"> |
|
||||
<el-option v-for="item in particleData" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="设备" prop="device"> |
|
||||
<el-select v-model="searchForm.device" placeholder="请选择"> |
|
||||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="参数" prop="parameter"> |
|
||||
<el-select v-model="searchForm.parameter" placeholder="请选择"> |
|
||||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button> |
|
||||
<el-button @click="resetForm(searchRef)">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
<el-card class="echart" shadow="always"> |
|
||||
<div class="comparisonInfo"> |
|
||||
<div ref="stackedRef" class="stackedLine" /> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts" setup> |
|
||||
import * as echarts from 'echarts'; |
|
||||
import { Ref } from 'vue'; |
|
||||
const stackedRef: Ref<HTMLElement | any> = ref(null); |
|
||||
import type { FormInstance } from 'element-plus'; |
|
||||
|
|
||||
const searchRef = ref<FormInstance>(); |
|
||||
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00' |
|
||||
const searchForm = reactive({ |
|
||||
time: '', |
|
||||
particle: '', |
|
||||
device: '', |
|
||||
parameter: '' |
|
||||
}); |
|
||||
|
|
||||
const submitForm = (formEl: FormInstance | undefined) => { |
|
||||
if (!formEl) return; |
|
||||
formEl.validate(valid => { |
|
||||
if (valid) { |
|
||||
console.log('submit!'); |
|
||||
} else { |
|
||||
console.log('error submit!'); |
|
||||
return false; |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const resetForm = (formEl: FormInstance | undefined) => { |
|
||||
if (!formEl) return; |
|
||||
formEl.resetFields(); |
|
||||
}; |
|
||||
const particleData = [ |
|
||||
{ label: '分钟', value: 1 }, |
|
||||
{ label: '小时', value: 2 } |
|
||||
]; |
|
||||
const optionss = [ |
|
||||
{ |
|
||||
value: 'Option1', |
|
||||
label: 'Option1' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'Option2', |
|
||||
label: 'Option2' |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
const colors = ['#EE6666', '#91CC75', '#5470C6']; |
|
||||
const options = { |
|
||||
color: colors, |
|
||||
tooltip: { |
|
||||
trigger: 'axis', |
|
||||
axisPointer: { |
|
||||
type: 'cross' |
|
||||
} |
|
||||
}, |
|
||||
grid: { |
|
||||
right: '20%' |
|
||||
}, |
|
||||
toolbox: { |
|
||||
feature: { |
|
||||
dataView: { show: true, readOnly: false }, |
|
||||
restore: { show: true }, |
|
||||
saveAsImage: { show: true } |
|
||||
} |
|
||||
}, |
|
||||
legend: { |
|
||||
data: ['回温', '供压', '回压'] |
|
||||
}, |
|
||||
xAxis: [ |
|
||||
{ |
|
||||
type: 'category', |
|
||||
axisTick: { |
|
||||
alignWithLabel: true |
|
||||
}, |
|
||||
// prettier-ignore |
|
||||
data: ['2021', '2022', '2023', '2024', '2025', '2026', '2027', '2028', '2029', '2030', '2031', '2032'] |
|
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '回温', |
|
||||
position: 'right', |
|
||||
alignTicks: true, |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
color: colors[0] |
|
||||
} |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
formatter: '{value} ml' |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '供压', |
|
||||
position: 'right', |
|
||||
alignTicks: true, |
|
||||
offset: 80, |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
color: colors[1] |
|
||||
} |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
formatter: '{value} ml' |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: '回压', |
|
||||
position: 'left', |
|
||||
alignTicks: true, |
|
||||
axisLine: { |
|
||||
show: true, |
|
||||
lineStyle: { |
|
||||
color: colors[2] |
|
||||
} |
|
||||
}, |
|
||||
axisLabel: { |
|
||||
formatter: '{value} °C' |
|
||||
} |
|
||||
} |
|
||||
], |
|
||||
series: [ |
|
||||
{ |
|
||||
name: '回温', |
|
||||
type: 'line', |
|
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] |
|
||||
}, |
|
||||
{ |
|
||||
name: '供压', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 2, |
|
||||
data: [5.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
|
||||
}, |
|
||||
{ |
|
||||
name: '回压', |
|
||||
type: 'line', |
|
||||
yAxisIndex: 1, |
|
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
// 图表初始化 |
|
||||
const chart = echarts.init(stackedRef.value); |
|
||||
chart.setOption(options); |
|
||||
|
|
||||
// 大小自适应 |
|
||||
window.addEventListener('resize', () => { |
|
||||
chart.resize(); |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
@import './index.scss'; |
|
||||
</style> |
|
||||
@ -1,187 +0,0 @@ |
|||||
<template> |
|
||||
<div class="details"> |
|
||||
<el-card class="search" shadow="always"> |
|
||||
<el-form ref="searchRef" :inline="true" :model="searchForm" label-width="100px" class="demo-ruleForm"> |
|
||||
<el-form-item label="时间" prop="time"> |
|
||||
<el-date-picker |
|
||||
v-model="searchForm.time" |
|
||||
type="datetimerange" |
|
||||
start-placeholder="开始时间" |
|
||||
end-placeholder="结束时间" |
|
||||
:default-time="defaultTime1" |
|
||||
/> |
|
||||
</el-form-item> |
|
||||
<!-- <el-form-item label="颗粒度" prop="particle"> |
|
||||
<el-select v-model="searchForm.particle" placeholder="请选择"> |
|
||||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> --> |
|
||||
<el-form-item label="设备" prop="device"> |
|
||||
<el-select v-model="searchForm.device" placeholder="请选择"> |
|
||||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item label="参数" prop="parameter"> |
|
||||
<el-select v-model="searchForm.parameter" placeholder="请选择"> |
|
||||
<el-option v-for="item in optionss" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="primary" @click="submitForm(searchRef)">确认</el-button> |
|
||||
<el-button @click="resetForm(searchRef)">重置</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
</el-card> |
|
||||
<el-card class="echart" shadow="always"> |
|
||||
<div class="comparisonInfo"> |
|
||||
<div ref="stackedRef" class="stackedLine" /> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts" setup> |
|
||||
import * as echarts from 'echarts'; |
|
||||
import { Ref } from 'vue'; |
|
||||
const stackedRef: Ref<HTMLElement | any> = ref(null); |
|
||||
import type { FormInstance } from 'element-plus'; |
|
||||
|
|
||||
const searchRef = ref<FormInstance>(); |
|
||||
const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0); // '12:00:00' |
|
||||
const searchForm = reactive({ |
|
||||
time: '', |
|
||||
particle: '', |
|
||||
device: '', |
|
||||
parameter: '' |
|
||||
}); |
|
||||
|
|
||||
const submitForm = (formEl: FormInstance | undefined) => { |
|
||||
if (!formEl) return; |
|
||||
formEl.validate(valid => { |
|
||||
if (valid) { |
|
||||
console.log('submit!'); |
|
||||
} else { |
|
||||
console.log('error submit!'); |
|
||||
return false; |
|
||||
} |
|
||||
}); |
|
||||
}; |
|
||||
|
|
||||
const resetForm = (formEl: FormInstance | undefined) => { |
|
||||
if (!formEl) return; |
|
||||
formEl.resetFields(); |
|
||||
}; |
|
||||
const optionss = [ |
|
||||
{ |
|
||||
value: 'Option1', |
|
||||
label: 'Option1' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'Option2', |
|
||||
label: 'Option2' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'Option3', |
|
||||
label: 'Option3' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'Option4', |
|
||||
label: 'Option4' |
|
||||
}, |
|
||||
{ |
|
||||
value: 'Option5', |
|
||||
label: 'Option5' |
|
||||
} |
|
||||
]; |
|
||||
|
|
||||
const options = { |
|
||||
title: { |
|
||||
text: 'Temperature Change in the Coming Week' |
|
||||
}, |
|
||||
tooltip: { |
|
||||
trigger: 'axis' |
|
||||
}, |
|
||||
legend: {}, |
|
||||
toolbox: { |
|
||||
show: true, |
|
||||
feature: { |
|
||||
dataZoom: { |
|
||||
yAxisIndex: 'none' |
|
||||
}, |
|
||||
dataView: { readOnly: false }, |
|
||||
magicType: { type: ['line', 'bar'] }, |
|
||||
restore: {}, |
|
||||
saveAsImage: {} |
|
||||
} |
|
||||
}, |
|
||||
xAxis: { |
|
||||
type: 'category', |
|
||||
boundaryGap: false, |
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|
||||
}, |
|
||||
yAxis: { |
|
||||
type: 'value', |
|
||||
axisLabel: { |
|
||||
formatter: '{value} °C' |
|
||||
} |
|
||||
}, |
|
||||
series: [ |
|
||||
{ |
|
||||
name: 'Highest', |
|
||||
type: 'line', |
|
||||
data: [10, 11, 13, 11, 12, 12, 9], |
|
||||
markPoint: { |
|
||||
data: [ |
|
||||
{ type: 'max', name: 'Max' }, |
|
||||
{ type: 'min', name: 'Min' } |
|
||||
] |
|
||||
}, |
|
||||
markLine: { |
|
||||
data: [{ type: 'average', name: 'Avg' }] |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
name: 'Lowest', |
|
||||
type: 'line', |
|
||||
data: [1, -2, 2, 5, 3, 2, 0], |
|
||||
markPoint: { |
|
||||
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }] |
|
||||
}, |
|
||||
markLine: { |
|
||||
data: [ |
|
||||
{ type: 'average', name: 'Avg' }, |
|
||||
[ |
|
||||
{ |
|
||||
symbol: 'none', |
|
||||
x: '90%', |
|
||||
yAxis: 'max' |
|
||||
}, |
|
||||
{ |
|
||||
symbol: 'circle', |
|
||||
label: { |
|
||||
position: 'start', |
|
||||
formatter: 'Max' |
|
||||
}, |
|
||||
type: 'max', |
|
||||
name: '最高点' |
|
||||
} |
|
||||
] |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
] |
|
||||
}; |
|
||||
|
|
||||
onMounted(() => { |
|
||||
// 图表初始化 |
|
||||
const chart = echarts.init(stackedRef.value); |
|
||||
chart.setOption(options); |
|
||||
|
|
||||
// 大小自适应 |
|
||||
window.addEventListener('resize', () => { |
|
||||
chart.resize(); |
|
||||
}); |
|
||||
}); |
|
||||
</script> |
|
||||
<style lang="scss" scoped> |
|
||||
@import './index.scss'; |
|
||||
</style> |
|
||||
Loading…
Reference in new issue