<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>