<template>
    <div id="dnzl" >
        <el-button  style="position:absolute;right:10px;z-index:20000"
                    type="text"
                    icon="el-icon-download"
                    title="生成图片"
                    @click="download"
                    >下载</el-button>   
    <div id="outlineechart" ref="ffg"
    :style="`margin-top:10px`"></div>
    </div>
</template>
<script>
import yan from "@/assets/commjs/color";
import html2canvas from "html2canvas";
export default {
    data(){
       return {
          echartsheight:undefined,
          zoom:'',
          myChartes:''
       }
    },
    props:{
      xdata:{
          type:Array,
          default:undefined
         },
         ydata:{
          type:Array,
          default:undefined 
         },
         title:{
          type:String,
          default:undefined  
         }
    },
    created(){
      
    },
    mounted(){
        this.resizeEchartd()
        this.zoom = 1 / document.body.style.zoom;
          window.addEventListener("resize", () => {
          this.zoom = 1 / document.body.style.zoom;
          if(this.myChartes !==''){
            this.myChartes.resize();
          }
          
          });
      this.$nextTick(() => {
        this.evaluation();
      });
    },
    methods:{
        resizeEchartd(){
      var elementResizeDetectorMaker = require("element-resize-detector")
      if(document.getElementById("pgcshi")){
     
      var erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById("pgcshi"), (element) => {
        let  domeId=document.getElementById("pgcshi")
        let  domeId2=document.getElementById("outlineechart")
        domeId2.style.width= domeId.offsetWidth - 10 + "px"
       if(this.myChartes !==''){
        this.myChartes.resize();
       }
      
      });
      }
    
    },
   download() {
    // 转换成canvas
    html2canvas(document.getElementById("dnzl"), {
        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(); // 下载之后把创建的元素删除
    });
  },
         evaluation(){
         const echarts = require('echarts')
         let domID1 = document.getElementById("outlineechart")
           setTimeout(() => {
                          domID1.style.width =document.getElementById("pgcshi").offsetWidth-0+'px'
                          domID1.style.height = (window.sessionStorage.getItem('appheight') - 50)/2+'px'
                      }, 0);
         var myChartes = echarts.init(domID1)
         let echartsColor = JSON.parse(window.localStorage.echartsColor);
          var option = {
     
                title: {
                    text: '区域',
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor,
                    },
                   // subtext: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
                    formatter: function (params) {
                       var tips = "";
                       tips += '<span style="">'+params[0].name + '</span></br/>';
                       for (var i = 0; i < params.length; i++) {
                       if(params[i].value==0.2){
                        tips +=params[i].seriesName + ":暂无数据<br/>";
                       }else{
                          if(params[i].value>=1 && params[i].value<=2){
                            tips += params[i].seriesName + ":" + ((params[i].value)) + "<br/>";
                          }else if(params[i].value>2 && params[i].value<=3){
                            tips += params[i].seriesName + ":" + ((params[i].value)) + "<br/>";
                          }else if(params[i].value>3 && params[i].value<=4){
                            tips += params[i].seriesName + ":" + ((params[i].value)) + "<br/>";
                          }else if(params[i].value>4 && params[i].value<=4.5){
                            tips += params[i].seriesName + ":" + ((params[i].value)) + "<br/>";
                          }else if(params[i].value>4.5 && params[i].value<=5){
                            tips += params[i].seriesName + ":" + ((params[i].value)) + "<br/>";
                          }else if(params[i].value>5){
                            tips += params[i].seriesName + ":" + ((params[i].value)) + "<br/>";
                          }
                       
                       }
                       }
                       return tips;
                       }
                },
                grid: yan.EchartObject.grid3,
                xAxis: [{
                    name:yan.EchartObject.area,
                    nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-5, 0, 0, 10]
                        },
                    textStyle: {
                          color: echartsColor.WordColor,
                        },
                    type: 'category',
                    data: this.xdata,
                    splitLine: {
                        show: false ,
                        lineStyle: {
                            color: echartsColor.thread,
                        },
                    },
                    axisTick: {
                        alignWithLabel: true
                    },
                     axisLine: {
                        show:true,
                        symbolOffset:25,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetX:25,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
                        symbol:['none', 'arrow']
                        } ,
                    axisLabel: {
                        textStyle: {
                          fontFamily: yan.EchartObject.fontFamily,
                          color: echartsColor.WordColor,
                          fontSize:yan.EchartObject.xNamefontSize,
                    },
                    rotate: 0, 
                    },
                }],
            //   toolbox: yan.EchartObject.toolbox1,
                 yAxis: {
                        name:yan.EchartObject.grade,
                        type: 'value',
                        nameTextStyle: {
                            color: echartsColor.WordColor,
                            verticalAlign:'top',//标题位置
                            padding: [-22, 0, 10, 0]
                        },
                        min:0,
                        max:5,
                        interval: 0.5,
                        axisLabel: {
                        show: true,
                        textStyle: {
                          color: echartsColor.WordColor,
                        },
                        // 这里重新定义就可以
                        formatter: function(value,index) {
                        var texts = []
                       if (value==1) {
                            texts.push('1级')
                        } else if (value==2) {
                            texts.push('2级')
                        } else if (value==3) {
                            texts.push('3级')
                        }else if (value==4) {
                            texts.push('4级')
                        }else if (value ==5) {
                            texts.push('5级')
                        
                        }
                        return texts
                        }
                    },
                     axisLine: {
                        show:true,
                        symbolOffset:25,//箭头距离x轴末端距离
                        lineStyle: {
                        shadowOffsetY:-25,          
                        color: echartsColor.thread,
                        shadowColor:  echartsColor.thread,   //设置阴影的颜色
                        },
                        symbol:['none', 'arrow']
                        }       
                    },
                    dataZoom: yan.EchartObject.dataZoom,
                series: [{
                    name: '评估值',
                    barMaxWidth: yan.EchartObject.barMaxWidth,
                    type: 'bar',
                    label: {
                        normal: {
                            show: false,
                            position: 'top'
                        }
                    },
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                        
                            // 定制显示（按顺序）
                            color: function(params) { 
                               if(4.5<params.value &&params.value <=5 && params.value !==0.2 ){
                                    return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                            offset: 1,
                                            color:yan.ColorObject.noContaminated   
                                            } ],false)
                                }else if(4<params.value &&params.value <=4.5 && params.value !==0.2 ){
                                    return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                            offset: 1,
                                            color: yan.ColorObject.qwContaminated  
                                            } ],false)
                                }else if(3<params.value &&params.value<= 4 && params.value !==0.2 ){
                                    return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                            offset: 1,
                                            color: yan.ColorObject.qdContaminated 
                                            } ],false)
                                }else if(2<params.value && params.value<=3 && params.value !==0.2 ){
                                    return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                            offset: 1,
                                            color:yan.ColorObject.centerContaminated   
                                            } ],false)
                                }else if( params.value>=1 && params.value<=2 && params.value !==0.2 ){
                                    return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                            offset: 1,
                                            color: yan.ColorObject.zdContaminated 
                                            } ],false)
                                }else if( params.value ==0.2 ){
                                    return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            {
                                            offset: 1,
                                            color: "#999999" 
                                            } ],false)
                                }
                            }
                        },
                    },
                    markLine: {  
                           silent:false,   
                           symbol :'circle', 
                           lineStyle:{
                                    color:'red',   
                                     width:1
                                },
                            emphasis:{
                                   lineStyle:{
                                      width:1
                                   },
                                 }, 
                        data: [
                       
                            {
                                name:"",
                                yAxis:1,
                                lineStyle:{
                                    color:yan.ColorObject.zdContaminated,  
                                },
                                label:{
                                    // position:"middle",
                                    formatter:'{b}',
                                textStyle:{
                                    color:yan.ColorObject.zdContaminated,
                                   
                                    
                                }
                            }
                            },
                            {
                                name:"",
                                yAxis: 2,
                                lineStyle:{
                                    color:yan.ColorObject.centerContaminated, 
                                      
                                },
                                label:{
                                    // position:"middle",
                                    formatter:'{b}',
                                textStyle:{
                                    color:yan.ColorObject.centerContaminated,
                                   
                                }
                            }
                            },
                             {
                                name:"",
                                yAxis: 3,
                                lineStyle:{
                                    color:yan.ColorObject.qdContaminated,   
                                },
                                label:{
                                    // position:"middle",
                                    formatter:'{b}',
                                    textStyle:{
                                    color:yan.ColorObject.qdContaminated,
                                    
                                    }
                                }
                           },
                           {
                                name:"",
                                yAxis: 4,
                                lineStyle:{
                                    color:yan.ColorObject.qwContaminated,   
                                },
                                label:{
                                    // position:"middle",
                                    formatter:'{b}',
                                textStyle:{
                                    color:yan.ColorObject.qwContaminated,
                                   
                                }
                            }
                            },
                            {
                                name:"",
                                yAxis: 5,
                                lineStyle:{
                                    color:yan.ColorObject.noContaminated,   
                                },
                                label:{
                                    // position:"middle",
                                    formatter:'{b}',
                                textStyle:{
                                    color:yan.ColorObject.noContaminated,
                                   
                                }
                                }
                            },
                        ]
                        },
                    data: this.ydata,
                }]
                    };    
         myChartes.setOption(option)
window.echartsArr.push(myChartes);
         let _this = this;
      _this.$erd.listenTo(_this.$refs.ffg, (element) => {
        _this.$nextTick(() => {
            domID1.style.width =document.getElementById("pgcshi").offsetWidth-0+'px'
          myChartes.resize();
        });
      });
         window.onresize = function () {
          myChartes.resize();
          }
        
       } 
    }
}
</script>