提交
This commit is contained in:
242
src/views/components/echarts/harmoniccurrent.vue
Normal file
242
src/views/components/echarts/harmoniccurrent.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user