243 lines
8.2 KiB
Vue
243 lines
8.2 KiB
Vue
<template>
|
||
<div class="pd10" :style="`height:${vh}`" id="jzhylv">
|
||
<el-button
|
||
style="position: absolute; right: 10px; z-index: 20000"
|
||
type="text"
|
||
icon="el-icon-download"
|
||
title="生成图片"
|
||
@click="download"
|
||
>
|
||
下载
|
||
</el-button>
|
||
<div id="jzharmonicvoltage" ref="jzxbhylv"></div>
|
||
</div>
|
||
<!-- <div id="electriccurrent" style="'width:900px;height:500px"></div> -->
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
echartsheight: undefined,
|
||
echartswidth: undefined,
|
||
zoom: '',
|
||
myChartes: '',
|
||
vh: null
|
||
}
|
||
},
|
||
created() {},
|
||
mounted() {
|
||
this.setHeight()
|
||
window.addEventListener('resize', this.setHeight)
|
||
|
||
this.resizeEchartjhylz()
|
||
|
||
//this.$nextTick(()=> {
|
||
this.electriccurrentdata()
|
||
// })
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.setHeight)
|
||
},
|
||
methods: {
|
||
setHeight() {
|
||
this.echartsheight = window.sessionStorage.getItem('appheight') - 200
|
||
this.vh = window.sessionStorage.getItem('appheight') - 246 + 'px'
|
||
if (this.myChartes !== '') {
|
||
this.myChartes.resize()
|
||
}
|
||
},
|
||
resizeEchartjhylz() {
|
||
var elementResizeDetectorMaker = require('element-resize-detector')
|
||
if (document.getElementById('jzhylv')) {
|
||
var erd = elementResizeDetectorMaker()
|
||
erd.listenTo(document.getElementById('jzhylv'), element => {
|
||
let domeId = document.getElementById('jzhylv')
|
||
let domeId2 = document.getElementById('jzharmonicvoltage')
|
||
domeId2.style.width = domeId.offsetWidth - 10 + 'px'
|
||
if (this.myChartes !== '') {
|
||
this.myChartes.resize()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
download() {
|
||
// 转换成canvas
|
||
html2canvas(document.getElementById('hylv'), {
|
||
//backgroundColor: 'white',
|
||
background: '#fff',
|
||
scale: 1
|
||
}).then(function (canvas) {
|
||
// 创建a标签，实现下载
|
||
var creatIMg = document.createElement('a')
|
||
creatIMg.download = '谐波电压含有率.png' // 设置下载的文件名，
|
||
creatIMg.href = canvas.toDataURL() // 下载url
|
||
creatIMg.click()
|
||
creatIMg.remove() // 下载之后把创建的元素删除
|
||
})
|
||
},
|
||
random(min, max) {
|
||
return parseInt(Math.random() * (max - min) + min)
|
||
},
|
||
//电能质量图表
|
||
electriccurrentdata() {
|
||
const echarts = require('echarts')
|
||
var domID1 = document.getElementById('jzharmonicvoltage')
|
||
setTimeout(() => {
|
||
domID1.style.width = document.getElementById('jzhylv').offsetWidth - 10 + 'px'
|
||
domID1.style.height = window.sessionStorage.getItem('appheight') - 246 + 'px'
|
||
}, 0)
|
||
var myChartes = echarts.init(domID1)
|
||
this.myChartes = myChartes
|
||
myChartes.clear()
|
||
var xData = []
|
||
var yData = []
|
||
var yData1 = []
|
||
function random(min, max) {
|
||
return parseInt(Math.random() * (max - min) + min)
|
||
}
|
||
for (var i = 0; i < 50; i++) {
|
||
xData.push(i + '次')
|
||
}
|
||
for (var i = 0; i < xData.length; i++) {
|
||
let value = random(10, 100)
|
||
yData.push(value)
|
||
}
|
||
for (var i = 0; i < xData.length; i++) {
|
||
let value = random(10, 100)
|
||
yData1.push(value)
|
||
}
|
||
var option = {
|
||
//backgroundColor: '#fff',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '10px',
|
||
right: '50px',
|
||
bottom: '40px',
|
||
top: '50px',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
data: ['国标限值', '电流幅值'],
|
||
left: '20px',
|
||
top: 0,
|
||
textStyle: {
|
||
color: '#333'
|
||
}
|
||
//itemWidth: 10,
|
||
//itemHeight: 10,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
name: '次数',
|
||
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: [
|
||
{
|
||
type: 'inside',
|
||
height: 13,
|
||
start: 0,
|
||
bottom: '20px',
|
||
end: 100
|
||
},
|
||
{
|
||
start: 0,
|
||
height: 13,
|
||
bottom: '20px',
|
||
end: 100
|
||
}
|
||
],
|
||
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
|
||
}
|
||
]
|
||
}
|
||
myChartes.setOption(option)
|
||
window.echartsArr.push(myChartes)
|
||
let _this = this
|
||
_this.$erd.listenTo(_this.$refs.jzxbhylv, element => {
|
||
_this.$nextTick(() => {
|
||
domID1.style.width = document.getElementById('jzhylv').offsetWidth - 10 + 'px'
|
||
myChartes.resize()
|
||
})
|
||
})
|
||
setInterval(() => {
|
||
myChartes.resize()
|
||
}, 100)
|
||
}
|
||
}
|
||
}
|
||
</script>
|