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