|
|
|
|
@ -85,7 +85,7 @@ |
|
|
|
|
检测曲线 |
|
|
|
|
</div> |
|
|
|
|
<div id="chartsContainer1" style=""> |
|
|
|
|
<div style="width: 100%;height: 240px;margin-top:30px;" v-for="(item,index) in lineData" :key="item.id" :id="`chart-${item.id || index}`"></div> |
|
|
|
|
<div style="width: 100%;height: 240px;margin-top:30px;" v-for="(item,index) in lineData" :key="item.id" :id="`chartview-${item.id || index}`"></div> |
|
|
|
|
</div> |
|
|
|
|
</el-dialog> |
|
|
|
|
</div> |
|
|
|
|
@ -279,9 +279,152 @@ export default { |
|
|
|
|
const chartDom = document.getElementById(chartId); |
|
|
|
|
console.log('chartDom----------',chartDom) |
|
|
|
|
if (!chartDom) return; |
|
|
|
|
|
|
|
|
|
let chart = this.$echarts.getInstanceByDom(chartDom); |
|
|
|
|
|
|
|
|
|
if(chart){ |
|
|
|
|
chart.dispose(); |
|
|
|
|
} |
|
|
|
|
// 初始化ECharts实例 |
|
|
|
|
chart = this.$echarts.init(chartDom); |
|
|
|
|
console.log('chart----------',chart) |
|
|
|
|
if(chart){ |
|
|
|
|
chart.clear(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const option = { |
|
|
|
|
title: { |
|
|
|
|
text: item.workTankName + item.testElement, |
|
|
|
|
left: "center", |
|
|
|
|
}, |
|
|
|
|
legend: { |
|
|
|
|
show: true, |
|
|
|
|
orient: "horizontal", |
|
|
|
|
right: '0' |
|
|
|
|
}, |
|
|
|
|
grid: { |
|
|
|
|
containLabel: true, |
|
|
|
|
left: 20, |
|
|
|
|
right: 20, |
|
|
|
|
bottom: '1%', |
|
|
|
|
top: '15%' |
|
|
|
|
}, |
|
|
|
|
tooltip: { |
|
|
|
|
// 提示框组件 |
|
|
|
|
trigger: 'axis', // 触发类型 柱状图 |
|
|
|
|
axisPointer: { type: 'shadow' } // 触发效果 移动上去 背景效果 |
|
|
|
|
}, |
|
|
|
|
xAxis: { |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#000', |
|
|
|
|
fontSize: 14, |
|
|
|
|
interval: 0 |
|
|
|
|
}, |
|
|
|
|
axisTick: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
show: true |
|
|
|
|
}, |
|
|
|
|
data: item.testDateList, |
|
|
|
|
type: 'category' |
|
|
|
|
}, |
|
|
|
|
yAxis: { |
|
|
|
|
axisLabel: { |
|
|
|
|
color: '#000', |
|
|
|
|
fontSize: 14 |
|
|
|
|
}, |
|
|
|
|
// max: globalMax + 10, |
|
|
|
|
axisTick: { |
|
|
|
|
show: false |
|
|
|
|
}, |
|
|
|
|
splitLine: { |
|
|
|
|
show: true |
|
|
|
|
}, |
|
|
|
|
axisLine: { |
|
|
|
|
show: true |
|
|
|
|
}, |
|
|
|
|
name: '' |
|
|
|
|
}, |
|
|
|
|
series: [ |
|
|
|
|
{ |
|
|
|
|
name: '上限', // 名称 |
|
|
|
|
data: item.maxList, |
|
|
|
|
type: 'line', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#6480e1' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
position: 'top', |
|
|
|
|
color: '#000' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '下限', // 名称 |
|
|
|
|
data: item.minList, |
|
|
|
|
type: 'line', |
|
|
|
|
smooth: true, |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#c0db50' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
name: '检测值', // 名称 |
|
|
|
|
data: item.targetList, |
|
|
|
|
type: 'line', |
|
|
|
|
itemStyle: { |
|
|
|
|
color: '#6a6d87' |
|
|
|
|
}, |
|
|
|
|
label: { |
|
|
|
|
show: false, |
|
|
|
|
color: '#fff' |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
chart.setOption(option); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
createChart1(){ |
|
|
|
|
console.log('this.lineData',this.lineData) |
|
|
|
|
let globalMax = -Infinity; // 初始化一个极小值 |
|
|
|
|
this.lineData.forEach((item, index) => { |
|
|
|
|
if (item.maxList && item.maxList.length > 0) { |
|
|
|
|
// 找出当前对象 max 数组里的最大值 |
|
|
|
|
const currentMax = Math.max(...item.maxList); |
|
|
|
|
|
|
|
|
|
// 如果比全局最大值大，则更新 |
|
|
|
|
if (currentMax > globalMax) { |
|
|
|
|
globalMax = currentMax; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
console.log('item-----------',item) |
|
|
|
|
const chartId = `chartview-${item.id || index}`; |
|
|
|
|
const chartDom = document.getElementById(chartId); |
|
|
|
|
console.log('chartDom----------',chartDom) |
|
|
|
|
if (!chartDom) return; |
|
|
|
|
|
|
|
|
|
let chart = this.$echarts.getInstanceByDom(chartDom); |
|
|
|
|
|
|
|
|
|
if(chart){ |
|
|
|
|
chart.dispose(); |
|
|
|
|
} |
|
|
|
|
// 初始化ECharts实例 |
|
|
|
|
const chart = this.$echarts.init(chartDom); |
|
|
|
|
chart = this.$echarts.init(chartDom); |
|
|
|
|
console.log('chart----------',chart) |
|
|
|
|
if(chart){ |
|
|
|
|
chart.clear(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const option = { |
|
|
|
|
title: { |
|
|
|
|
@ -381,7 +524,7 @@ export default { |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
}; |
|
|
|
|
chart.clear(); |
|
|
|
|
|
|
|
|
|
chart.setOption(option); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
@ -492,7 +635,7 @@ export default { |
|
|
|
|
this.lineData = res.data.data.taskCopys |
|
|
|
|
this.detailBox = true |
|
|
|
|
this.$nextTick(() =>{ |
|
|
|
|
this.createChart() |
|
|
|
|
this.createChart1() |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
// this.detailForm = { |
|
|
|
|
|
zhangdi
3 weeks ago