212 lines
4.5 KiB
Vue
212 lines
4.5 KiB
Vue
<template>
|
||
<div
|
||
ref="lineChart"
|
||
:id="id"
|
||
:class="className"
|
||
:style="{ height: height, width: width, marginLeft: '10px' }" />
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
require('echarts/theme/macarons'); // echarts theme
|
||
import resize from '@/utils/chartMixins/resize';
|
||
import { parseTime } from '../../mixins/code-filter';
|
||
|
||
const animationDuration = 1000;
|
||
export default {
|
||
name: 'lineChart',
|
||
mixins: [resize],
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default: 'chart',
|
||
},
|
||
className: {
|
||
type: String,
|
||
default: 'chart',
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '100%',
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '300px',
|
||
},
|
||
barData: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
chart: null,
|
||
};
|
||
},
|
||
mounted() {
|
||
if (!this.chart) {
|
||
this.chart = echarts.init(this.$refs.lineChart);
|
||
this.$nextTick(() => {
|
||
this.initChart();
|
||
});
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
if (!this.chart) {
|
||
return;
|
||
}
|
||
this.chart.dispose();
|
||
this.chart = null;
|
||
},
|
||
watch: {
|
||
barData: {
|
||
handler() {
|
||
if (this.chart) {
|
||
this.$nextTick(() => {
|
||
this.initChart();
|
||
});
|
||
} else {
|
||
this.$nextTick(() => {
|
||
this.chart = echarts.init(this.$refs.lineChart);
|
||
this.initChart();
|
||
});
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
},
|
||
methods: {
|
||
getUniqueTimes() {
|
||
const { edgeCt, temperCt, downCt } = this.barData;
|
||
// 合并所有包含时间的数组
|
||
const allTimeEntries = [...(edgeCt || []), ...(temperCt || []), ...(downCt || [])];
|
||
// 提取时间戳并去重（使用 Set）
|
||
const uniqueTimes = [...new Set(allTimeEntries.map(item => item.recordTime))];
|
||
// 按时间戳排序（确保时间顺序正确）
|
||
return uniqueTimes.sort((a, b) => a - b);
|
||
},
|
||
initChart() {
|
||
const uniqueTimes = this.getUniqueTimes();
|
||
const _this = this;
|
||
this.chart.setOption({
|
||
title: {
|
||
text: this.title
|
||
? '{space|}{tip|}{space|}{value|' + this.title + '}'
|
||
: '',
|
||
textStyle: {
|
||
rich: {
|
||
tip: {
|
||
width: 6,
|
||
height: 6,
|
||
borderRadius: 50,
|
||
backgroundColor: '#288AFF',
|
||
},
|
||
space: {
|
||
width: 8,
|
||
},
|
||
value: {
|
||
fontSize: 14,
|
||
color: 'black',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
color: ['#288AFF', '#8EF0AB', '#FFDC94'],
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999',
|
||
},
|
||
},
|
||
},
|
||
legend: {
|
||
data: ['磨边节拍', '钢化节拍', '下片节拍'],
|
||
},
|
||
grid: {
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: uniqueTimes.map(time => parseTime(time, '{m}-{d} {h}:{i}')),
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '节拍 pcs/min',
|
||
min: 0,
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
},
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100,
|
||
},
|
||
{
|
||
start: 0,
|
||
end: 100,
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '磨边节拍',
|
||
type: 'line',
|
||
tooltip: {
|
||
valueFormatter: function (value) {
|
||
return value + 'pcs/min';
|
||
},
|
||
},
|
||
data: uniqueTimes.map(time => {
|
||
// 查找当前时间对应的 ct 值，没有则补 null（图表中会显示为断点）
|
||
const match = this.barData.edgeCt.find(item => item.recordTime === time);
|
||
return match ? match.ct : 0;
|
||
})
|
||
},
|
||
// 钢化节拍
|
||
{
|
||
name: '钢化节拍',
|
||
type: 'line',
|
||
tooltip: {
|
||
valueFormatter: function (value) {
|
||
return value + 'pcs/min';
|
||
},
|
||
},
|
||
data: uniqueTimes.map(time => {
|
||
const match = this.barData.temperCt.find(item => item.recordTime === time);
|
||
return match ? match.ct : 0;
|
||
})
|
||
},
|
||
// 下片节拍
|
||
{
|
||
name: '下片节拍',
|
||
type: 'line',
|
||
tooltip: {
|
||
valueFormatter: function (value) {
|
||
return value + 'pcs/min';
|
||
},
|
||
},
|
||
data: uniqueTimes.map(time => {
|
||
const match = this.barData.downCt.find(item => item.recordTime === time);
|
||
return match ? match.ct : 0;
|
||
})
|
||
}
|
||
]
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|