|
|
@@ -0,0 +1,223 @@ |
|
|
|
<template> |
|
|
|
<div :id="id" ref="techy-line-chart" class="techy-chart" /> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import echarts from 'echarts' |
|
|
|
import resize from '@/views/OperationalOverview/components/mixins/resize' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'DianLineChart', |
|
|
|
mixins: [resize], |
|
|
|
/** Fn.1: 保证全屏切换时也刷新图表 ,应该在每个父组件为flex:1的echarts组件里都加上,以确保能正确地伸缩 */ |
|
|
|
inject: ['resizeStatus'], |
|
|
|
/** End Fn.1 */ |
|
|
|
props: { |
|
|
|
id: { |
|
|
|
type: String, |
|
|
|
default: 'default-dian-id' |
|
|
|
}, |
|
|
|
title: { |
|
|
|
type: String, |
|
|
|
default: 'default-title' |
|
|
|
}, |
|
|
|
xData: { |
|
|
|
type: Array, |
|
|
|
default: () => [] |
|
|
|
}, |
|
|
|
seriesData: { |
|
|
|
type: Array, |
|
|
|
default: () => [] |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
const colors = ['#5470C6', '#EE6666', '#339888'] |
|
|
|
|
|
|
|
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10 |
|
|
|
let data = [ |
|
|
|
// 温度走势 |
|
|
|
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5], |
|
|
|
// 电流走势 |
|
|
|
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71], |
|
|
|
// 电压走势 |
|
|
|
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73] |
|
|
|
] |
|
|
|
let wendu = data[0] |
|
|
|
let dianliu = data[1] |
|
|
|
let dianya = data[2] |
|
|
|
|
|
|
|
return { |
|
|
|
chart: null, |
|
|
|
option: { |
|
|
|
color: colors, |
|
|
|
legend: { |
|
|
|
top: 4, |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
textStyle: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 8 |
|
|
|
}, |
|
|
|
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度'] |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: 32, |
|
|
|
left: 64, |
|
|
|
bottom: 28 |
|
|
|
}, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9' |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#fff3' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
name: '电流/A', |
|
|
|
nameTextStyle: { align: 'right', fontSize: 8 }, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
onZero: true, |
|
|
|
position: 'left', |
|
|
|
offset: 42, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff9', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
// lineStyle: { |
|
|
|
// color: '#fff3' |
|
|
|
// } |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '电压/V', |
|
|
|
nameTextStyle: { align: 'right', fontSize: 8 }, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
axisTick: { show: false }, |
|
|
|
onZero: true, |
|
|
|
position: 'left', |
|
|
|
offset: 0, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff9', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
// lineStyle: { |
|
|
|
// color: '#fff3' |
|
|
|
// } |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '温度', |
|
|
|
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 8 }, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff9', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
splitLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#fff3' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'ABC三相电压/v', |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 0, |
|
|
|
// smooth: true, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: dianliu, |
|
|
|
symbol: 'none' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'ABC三相电流/a', |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 1, |
|
|
|
// smooth: true, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: dianya, |
|
|
|
symbol: 'none' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '电缆温度', |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 2, |
|
|
|
// smooth: true, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: wendu, |
|
|
|
symbol: 'none' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
shouldResize() { |
|
|
|
return this.resizeStatus() |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
shouldResize(val, oldVal) { |
|
|
|
setTimeout(() => { |
|
|
|
this.chart.resize() |
|
|
|
}, 250) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) |
|
|
|
this.chart.setOption(this.option) |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
if (this.chart) this.chart.dispose() |
|
|
|
this.chart = null |
|
|
|
}, |
|
|
|
methods: {} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
.techy-chart { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.techy-chart >>> div { |
|
|
|
width: 100% !important; |
|
|
|
height: 100% !important; |
|
|
|
} |
|
|
|
</style> |