203 lines
9.6 KiB
Vue
203 lines
9.6 KiB
Vue
|
<template>
|
||
|
|
<!-- <div id="electriccurrent" :style="'width:100%;height:'+echartsheight+'px;zoom:'+device"></div> -->
|
||
|
|
<div id="electriccurrent" :style="'width:100%;height:'+echartsheight+'px;zoom:'+device"></div>
|
||
|
|
<!-- <div id="electriccurrent" style="'width:900px;height:500px"></div> -->
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {getheight,device} from '../../../assets/commjs/common'
|
||
|
|
import {
|
||
|
|
topColor,
|
||
|
|
bottomColor,
|
||
|
|
borderColorN,
|
||
|
|
borderColorW,
|
||
|
|
nationalLimit1,
|
||
|
|
nationalLimit2,
|
||
|
|
voltageColor1,
|
||
|
|
voltageColor2,
|
||
|
|
currentColor1,
|
||
|
|
currentColor2,
|
||
|
|
endColor1,
|
||
|
|
endColor2} from '../../../assets/commjs/color'
|
||
|
|
export default {
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
echartsheight:undefined,
|
||
|
|
echartswidth:undefined,
|
||
|
|
myChartes12:undefined,
|
||
|
|
device:1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created(){
|
||
|
|
this.device=window.devicePixelRatio
|
||
|
|
if(this.device==1) {
|
||
|
|
this.echartsheight =(getheight()+(getheight()*0.435))
|
||
|
|
}
|
||
|
|
if(this.device==1.25){
|
||
|
|
this.echartsheight =(getheight()+(getheight()*0.15))
|
||
|
|
}
|
||
|
|
if(this.device==1.5){
|
||
|
|
this.echartsheight =(getheight()+(getheight()*0.625))
|
||
|
|
}
|
||
|
|
// if(this.device==1){
|
||
|
|
// this.echartsheight =(this.echartsheight+(this.echartsheight*0.425))
|
||
|
|
// }
|
||
|
|
// if(this.device==1.25){
|
||
|
|
// this.echartsheight =( this.echartsheight+( this.echartsheight*0.14))
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.$nextTick(()=> {
|
||
|
|
this.electriccurrentdata()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
random(min, max) {
|
||
|
|
return parseInt(Math.random() * (max - min) + min);
|
||
|
|
},
|
||
|
|
//电能质量图表
|
||
|
|
electriccurrentdata(){
|
||
|
|
const echarts = require('echarts')
|
||
|
|
this.myChartes12 = echarts.init(document.getElementById('electriccurrent'))
|
||
|
|
var option = {
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '2%',
|
||
|
|
right: '3%',
|
||
|
|
bottom: '3%',
|
||
|
|
top: '10%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: ['国标限值', '电流幅值'],
|
||
|
|
left: '20px',
|
||
|
|
top:0,
|
||
|
|
//icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
|
||
|
|
textStyle: {
|
||
|
|
color: "#333"
|
||
|
|
},
|
||
|
|
//itemWidth: 10,
|
||
|
|
//itemHeight: 10,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: xData,
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
symbol:['none', 'arrow'],
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(0,0,0,0.5)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
alignWithLabel: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
max: '100',
|
||
|
|
name: '单位:%',
|
||
|
|
nameTextStyle: {
|
||
|
|
// color: '#000',
|
||
|
|
fontSize: 12,
|
||
|
|
left:'0%'
|
||
|
|
|
||
|
|
},
|
||
|
|
position:'left',
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
symbol:['none', 'arrow'],
|
||
|
|
lineStyle: {
|
||
|
|
color: '#333'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#f1f1f1'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#999',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: true,
|
||
|
|
alignWithLabel: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
dataZoom: [{
|
||
|
|
show: true,
|
||
|
|
height: 30,
|
||
|
|
xAxisIndex: [
|
||
|
|
0
|
||
|
|
],
|
||
|
|
bottom: 10,
|
||
|
|
start: 30,
|
||
|
|
end: 60,
|
||
|
|
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||
|
|
handleSize: '110%',
|
||
|
|
handleStyle:{
|
||
|
|
color:"#d3dee5",
|
||
|
|
|
||
|
|
},
|
||
|
|
textStyle:{
|
||
|
|
color:"#fff"},
|
||
|
|
borderColor:"#90979c"
|
||
|
|
}, {
|
||
|
|
type: "inside",
|
||
|
|
show: true,
|
||
|
|
height: 15,
|
||
|
|
start: 1,
|
||
|
|
end: 35
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
name: '国标限值',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: '25%',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#00CC99',
|
||
|
|
barBorderRadius: [5, 5, 0, 0],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data:yData
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '电流幅值',
|
||
|
|
type: 'bar',
|
||
|
|
barWidth: '25%',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#FF9900',
|
||
|
|
barBorderRadius: [12, 12, 0, 0],
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
data:yData1
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
this.myChartes12.setOption(option)
|
||
|
|
window.echartsArr.push(this.myChartes12);
|
||
|
|
// setInterval(() => {
|
||
|
|
// this.myChartes12.resize()
|
||
|
|
// }, 200);
|
||
|
|
// setInterval(function (){
|
||
|
|
// // alert(1)
|
||
|
|
window.onresize = function () {
|
||
|
|
this.myChartes12.resize();
|
||
|
|
}
|
||
|
|
// },200)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|