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