<template>
 
    <div class="helloword">
    <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" :parent="true" v-on:dragging="resize">
      <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
       <div id="chart" :style="{width: + vw+ 'px',height:+vh+'px'}"></div>
       <!-- <div id="chart" :style="chartStyle"></div> -->
       <!-- <div id="chart" style="width:100%;height:100%;"></div> -->
             <!-- <div id="chart" style="width:200px;height:200px;"></div> -->
        <!-- <div class="box"  id="chart" :style="{width: +vw+ 'px',height:+vh+'px'}"></div> -->
         <!-- <div id="chart"></div> -->
        <!-- <div id="chart" :style="chartStyle"></div> -->
       <!-- <div :style="{width:+ vw+'px',height:+vh+'px'}" id="chart"></div> -->
         <!-- <power style="width:100%;height:100%;position:absolute;"></power> -->
       
    </VueDragResize>

  </div>
</template>

<script>
// import VueDraggableResizable from 'vue-draggable-resizable'
  import VueDragResize from 'vue-drag-resize';
  import power from '@/components/mining/power.vue'
    import coal_output from '@/components/mining/coal_output.vue'
export default {
  name: "industrialVideo",
  data(){
    return{
        vw: 0,
      vh: 0,
      top: 0,
      left: 0,
      chartStyle:{
        width:"",
        height:""
      }

    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.initChart()
    })
 
    },
  watch:{
    vw(newName, oldName) {
    this.myChart.resize();
  
      console.log(this.chartStyle.width)

    },
    vh(newName, oldName) {
      this.myChart.resize();
  },
  },
  created() {
    this.vw = 200 + "px";
    this.vh = 200 + "px";
  },
 methods: {
    resize(newRect) {
      this.vw = newRect.width;
      this.vh = newRect.height;
      this.top = newRect.top;
      this.left = newRect.left;
      // this.$echarts.resize;
      // this.myChart.resize;
    },

    initChart(){
      this.myChart = this.$echarts.init(document.getElementById('chart'));
      this.myChart.setOption({
                    title: {
                        text: '采煤机平均功率',
                        textStyle: {
                            fontSize: 12,
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        // axisPointer: {
                        //     type: 'cross',
                        //     label: {
                        //         backgroundColor: '#6a7985'
                        //     }
                        // }
                    },
                    legend: {
                        data: ['单位：KW/min']
                    },
                    grid: {
                        top: '15%',
                        left: '1%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: ['16:19', '16:21', '16:23', '16:25', '16:27'],
                        // 修改x轴文字颜色和大小
                        axisLabel: {
                            textStyle: {
                                color: "rgba(187, 174, 200, 1)",
                                fontSize: "12"
                            }
                        }
                    }],
                    yAxis: [{
                            type: 'value',
                            // axisTick: { show: false },
                            axisLine: {
                                // 修改Y轴坐标轴颜色
                                lineStyle: {
                                    color: "rgba(187, 174, 200, 1)",

                                }
                            },
                            axisLabel: {
                                //修改y轴数据颜色
                                textStyle: {
                                    color: "rgba(187, 174, 200, 1)",
                                    fontSize: 12
                                }
                            },
                            // 修改分割线的颜色
                            splitLine: {
                                lineStyle: {
                                    color: "rgba(199, 186, 212, 0.3)",
                                    // color: "rgba(0, 255, 0, 1.0)",
                                }
                            }
                        }

                    ],
                    series: [{
                        name: '采煤机平均功率',
                        type: 'line',
                        smooth: true,
                        // 单独修改当前线条的样式
                        lineStyle: {
                            color: "#0cff30",
                            width: "2"
                        },
                        // 设置拐点
                        symbol: "circle",
                        // 拐点大小
                        symbolSize: 3,
                        // 开始不显示拐点， 鼠标经过显示
                        showSymbol: false,
                        // 设置拐点颜色以及边框
                        itemStyle: {
                            color: "#0184d5",
                            borderColor: "rgba(0, 170, 255, 0.1)",
                            borderWidth: 6
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [500, 400, 200, 600, 500, 800, 600]
                    }]
                });

    },
    // resize(){
    //   this.myChart.resize;
    // }
  },
  components: {
          VueDragResize,
           power,
            coal_output,
            // VueDraggableResizable 
      },


}
</script>

<style scoped>
.box{
position: relative;
}


</style>

    
      