|
|
@@ -5,6 +5,218 @@ |
|
|
|
<script> |
|
|
|
import echarts from 'echarts' |
|
|
|
import resize from '@/views/OperationalOverview/components/mixins/resize' |
|
|
|
import { Random } from 'mockjs' |
|
|
|
|
|
|
|
class ChartOption { |
|
|
|
constructor() { |
|
|
|
this.color = ['#E02094', '#F0D63C', '#1A99FF'] |
|
|
|
|
|
|
|
this.legend = { |
|
|
|
top: 11, |
|
|
|
right: 32, |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
textStyle: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.grid = { |
|
|
|
top: 36, |
|
|
|
left: 64, |
|
|
|
bottom: 36 |
|
|
|
} |
|
|
|
|
|
|
|
this.tooltip = { |
|
|
|
show: true, |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'line', |
|
|
|
axis: 'x', |
|
|
|
lineStyle: { |
|
|
|
color: '#41888F90', |
|
|
|
shadowColor: '#41888F', |
|
|
|
shadowBlur: 10, |
|
|
|
width: 2 |
|
|
|
} |
|
|
|
}, |
|
|
|
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;' |
|
|
|
} |
|
|
|
|
|
|
|
this.xAxis = { |
|
|
|
type: 'category', |
|
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 12, |
|
|
|
margin: 10 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#fff3' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
this.yAxis = [ |
|
|
|
{ |
|
|
|
name: '电流/A ', |
|
|
|
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' }, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
onZero: true, |
|
|
|
position: 'left', |
|
|
|
offset: 28, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#5982B2', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 10 |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff1', |
|
|
|
type: 'dotted' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: ' 电压/V ', |
|
|
|
nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' }, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
axisTick: { show: false }, |
|
|
|
onZero: true, |
|
|
|
position: 'left', |
|
|
|
offset: 0, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#5982B2', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 10 |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff1', |
|
|
|
type: 'dotted' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: ' 温度', |
|
|
|
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 }, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff9', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff1', |
|
|
|
type: 'dotted' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 10 |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
|
|
|
|
this.series = [ |
|
|
|
{ |
|
|
|
name: 'ABC三相电压/v', |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 0, |
|
|
|
// smooth: true, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: Array(12) |
|
|
|
.fill(1) |
|
|
|
.map(_ => Random.integer(30, 100)), |
|
|
|
symbol: 'none' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'ABC三相电流/a', |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 1, |
|
|
|
// smooth: true, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: Array(12) |
|
|
|
.fill(1) |
|
|
|
.map(_ => Random.integer(30, 100)), |
|
|
|
symbol: 'none' |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '电缆温度', |
|
|
|
type: 'line', |
|
|
|
yAxisIndex: 2, |
|
|
|
// smooth: true, |
|
|
|
emphasis: { |
|
|
|
focus: 'series' |
|
|
|
}, |
|
|
|
data: Array(12) |
|
|
|
.fill(1) |
|
|
|
.map(_ => Random.integer(30, 100)), |
|
|
|
symbol: 'none' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
|
|
|
|
get option() { |
|
|
|
return this |
|
|
|
} |
|
|
|
|
|
|
|
optionFilter(option, calcSize = () => {} /** callback */) { |
|
|
|
let newOption |
|
|
|
if (Array.isArray(option)) { |
|
|
|
newOption = [] |
|
|
|
option.forEach(item => { |
|
|
|
newOption.push(this.optionFilter(item, calcSize)) |
|
|
|
}) |
|
|
|
return newOption |
|
|
|
} else if (typeof option === 'object') { |
|
|
|
newOption = {} |
|
|
|
for (const key in option) { |
|
|
|
if (key === 'colorStops') newOption[key] = option[key] |
|
|
|
else if ( |
|
|
|
typeof option[key] === 'number' /** 过滤不做变化的属性 */ && |
|
|
|
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 |
|
|
|
) { |
|
|
|
newOption[key] = calcSize(option[key]) |
|
|
|
} else newOption[key] = this.optionFilter(option[key], calcSize) |
|
|
|
} |
|
|
|
return newOption |
|
|
|
} else { |
|
|
|
newOption = calcSize(option) |
|
|
|
return option |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'DianLineChart', |
|
|
@@ -19,209 +231,9 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
const colors = ['#E02094', '#F0D63C', '#1A99FF'] |
|
|
|
|
|
|
|
// 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].map(_ => { |
|
|
|
let v = Math.floor(Math.random() * 100) |
|
|
|
while (v < 30) { |
|
|
|
v = Math.floor(Math.random() * 100) |
|
|
|
} |
|
|
|
return v |
|
|
|
}), |
|
|
|
// 电流走势 |
|
|
|
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => { |
|
|
|
let v = Math.floor(Math.random() * 100) |
|
|
|
while (v < 30) { |
|
|
|
v = Math.floor(Math.random() * 100) |
|
|
|
} |
|
|
|
return v |
|
|
|
}), |
|
|
|
// 电压走势 |
|
|
|
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => { |
|
|
|
let v = Math.floor(Math.random() * 100) |
|
|
|
while (v < 30) { |
|
|
|
v = Math.floor(Math.random() * 100) |
|
|
|
} |
|
|
|
return v |
|
|
|
}) |
|
|
|
] |
|
|
|
let wendu = data[0] |
|
|
|
let dianliu = data[1] |
|
|
|
let dianya = data[2] |
|
|
|
|
|
|
|
return { |
|
|
|
chart: null, |
|
|
|
option: { |
|
|
|
color: colors, |
|
|
|
legend: { |
|
|
|
top: 16, |
|
|
|
right: 64, |
|
|
|
itemWidth: 8, |
|
|
|
itemHeight: 8, |
|
|
|
textStyle: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 12 |
|
|
|
} |
|
|
|
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度'] |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: 48, |
|
|
|
left: 64, |
|
|
|
bottom: 36 |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
show: true, |
|
|
|
trigger: 'axis', |
|
|
|
axisPointer: { |
|
|
|
type: 'line', |
|
|
|
axis: 'x', |
|
|
|
lineStyle: { |
|
|
|
color: '#41888F90', |
|
|
|
shadowColor: '#41888F', |
|
|
|
shadowBlur: 10, |
|
|
|
width: 2 |
|
|
|
} |
|
|
|
}, |
|
|
|
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;' |
|
|
|
}, |
|
|
|
xAxis: [ |
|
|
|
{ |
|
|
|
type: 'category', |
|
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 14 |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#fff3' |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
name: '电流/A ', |
|
|
|
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' }, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
onZero: true, |
|
|
|
position: 'left', |
|
|
|
offset: 32, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#5982B2', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff1', |
|
|
|
type: 'dotted' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: ' 电压/V ', |
|
|
|
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' }, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
axisTick: { show: false }, |
|
|
|
onZero: true, |
|
|
|
position: 'left', |
|
|
|
offset: 0, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#5982B2', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 12 |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff1', |
|
|
|
type: 'dotted' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: ' 温度', |
|
|
|
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 }, |
|
|
|
axisTick: { show: false }, |
|
|
|
axisLine: { |
|
|
|
show: false, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff9', |
|
|
|
width: 1 |
|
|
|
} |
|
|
|
}, |
|
|
|
type: 'value', |
|
|
|
splitNumber: 4, |
|
|
|
splitLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: '#fff1', |
|
|
|
type: 'dotted' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
color: '#fff9', |
|
|
|
fontSize: 12 |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
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' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
option: null |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
@@ -239,7 +251,7 @@ export default { |
|
|
|
mounted() { |
|
|
|
this.$nextTick(() => { |
|
|
|
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) |
|
|
|
this.chart.setOption(this.option) |
|
|
|
this.setChartOption() |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
@@ -247,7 +259,14 @@ export default { |
|
|
|
this.chart = null |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {} |
|
|
|
calcSize(num) { |
|
|
|
const beilv = document.documentElement.style.getPropertyValue('--beilv') |
|
|
|
return num * beilv |
|
|
|
}, |
|
|
|
setChartOption() { |
|
|
|
let chartOption = new ChartOption() |
|
|
|
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|