@@ -15,70 +15,24 @@
< script >
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs'
import { debounce } from '@/utils'
export default {
name : 'RealtimeLineChart' ,
mixins : [ resize ] ,
/** Fn.1: 保证全屏切换时也刷新图表 ， ，
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 = [ '#1A99FF' , '#F0D63C' , '#E02094' ]
class ChartOption {
constructor ( ) {
const wenduData = Array ( 12 )
. fill ( 1 )
. map ( _ => Random . integer ( 30 , 100 ) )
const dianyaData = Array ( 12 )
. fill ( 1 )
. map ( _ => Random . integer ( 30 , 100 ) )
const dianliuData = Array ( 12 )
. fill ( 1 )
. map ( _ => Random . integer ( 30 , 100 ) )
// 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 ]
this . color = [ '#1A99FF' , '#F0D63C' , '#E02094' ]
return {
chart : null ,
option : {
color : colors ,
legend : {
this . legend = {
top : 28 ,
right : 40 ,
itemWidth : 10 ,
@@ -87,30 +41,35 @@ export default {
color : '#fff9' ,
fontSize : 10
}
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度']
} ,
grid : {
}
this . grid = {
top : 80 ,
left : 88 ,
right : 24 ,
bottom : 32
} ,
tooltip : {
}
this . tooltip = {
show : true ,
trigger : 'axis' ,
textStyle : {
fontSize : 12
} ,
axisPointer : {
type : 'line' ,
axis : 'x'
} ,
extraCssText : 'width: 100px !important;'
} ,
xAxis : [
{
extraCssText : 'width: calc(100px*var(--beilv)) !important;'
}
this . xAxis = {
type : 'category' ,
data : [ '01:00' , '02:00' , '03:00' , '04:00' , '05:00' , '05:00' , '06:00' , '07:00' , '08:00' , '09:00' , '10:00' ] ,
data : [ '01:00' , '02:00' , '03:00' , '04:00' , '05:00' , '06:00' , '07:00' , '08:00' , '09:00' , '10:00' ] ,
axisTick : { show : false } ,
axisLabel : {
color : '#fff9'
color : '#fff9' ,
fontSize : 12
} ,
axisLine : {
lineStyle : {
@@ -118,11 +77,11 @@ export default {
}
}
}
] ,
yAxis : [
this . yAxis = [
{
name : '能耗 ' ,
nameTextStyle : { align : 'right' , fontSize : 10 , color : '#fff9' } ,
nameTextStyle : { align : 'right' , fontSize : 10 , lineHeight : 14 , color : '#fff9' } ,
type : 'value' ,
splitNumber : 4 ,
onZero : true ,
@@ -150,7 +109,7 @@ export default {
} ,
{
name : '产量 ' ,
nameTextStyle : { align : 'right' , fontSize : 10 , color : '#fff9' } ,
nameTextStyle : { align : 'right' , fontSize : 10 , lineHeight : 14 , color : '#fff9' } ,
type : 'value' ,
splitNumber : 4 ,
axisTick : { show : false } ,
@@ -176,8 +135,9 @@ export default {
}
}
}
] ,
series : [
]
this . series = [
{
name : '产线1' ,
type : 'line' ,
@@ -186,7 +146,7 @@ export default {
emphasis : {
focus : 'series'
} ,
data : dianliu ,
data : dianliuData ,
symbol : 'none' ,
areaStyle : {
color : {
@@ -217,7 +177,7 @@ export default {
emphasis : {
focus : 'series'
} ,
data : dianya ,
data : dianyaData ,
symbol : 'none' ,
areaStyle : {
color : {
@@ -242,6 +202,49 @@ export default {
}
]
}
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 : 'RealtimeLineChart' ,
mixins : [ resize ] ,
/** Fn.1: 保证全屏切换时也刷新图表 ， ，
inject : [ 'resizeStatus' ] ,
/** End Fn.1 */
props : { } ,
data ( ) {
return {
chart : null ,
option : null
}
} ,
computed : {
@@ -251,7 +254,7 @@ export default {
} ,
watch : {
shouldResize ( val , oldVal ) {
console . log ( 'should resize' )
console . log ( 'fullscreen resize' )
setTimeout ( ( ) => {
this . chart . resize ( )
} , 250 )
@@ -260,14 +263,23 @@ export default {
mounted ( ) {
this . $nextTick ( ( ) => {
if ( ! this . chart ) this . chart = echarts . init ( this . $refs [ 'realtimeLineChart' ] )
this . chart . setOption ( this . option )
this . setChartOption ( )
} )
} ,
beforeDestroy ( ) {
if ( this . chart ) this . chart . dispose ( )
this . chart = null
} ,
methods : { }
methods : {
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 >