<template>
<div class="kanban-body">
<el-container>
  <el-main>
      <div style="margin-top:15px;margin-left:52px; margin-right:51px;">
          <div style="height:350px;background:#2c2c2c ;">

          </div>
          <div style="display:flex; margin-top:20px;" >
              <div style="width:275px;height:250px;background:#2c2c2c ;">

              </div>
              <div style="width:275px;height:250px;background:#2c2c2c ;margin-left:28px;">

              </div>
              <div style="height: 250px;
    width: 220px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;">
                  <img style="height:30px;width:30px;" src="../assets/img/print.png" alt="">
                  <div style="margin-top:15px;font-size:13px;">打印</div>
              </div>
          </div>
      </div>
  </el-main>
</el-container>
</div>

</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Kanban',
  data() {
    return {
        tabs:[{name:''},{}],
        num:0,
        activeIndex: '1',
        timer:'',
        date:new Date()
    }
  },
  components: {
    
  },
  computed:{
   
  },
  created(){
    this.$store.dispatch('showAside');
  },
  methods:{
      tabChange(i){
          this.num=i;
      },
    handleSelect(key, keyPath) {
    console.log(key, keyPath);
    },
    getChart(){
        let myChart = echarts.init(this.$refs.chart);
        var option = {
            legend: {
                x:'right',
                textStyle:{color:'#FFFF',}
            },
            dataset: {
                source: [
                    ['product', '未开机', '正常', '异常'],
                    ['5', 43.3, 85.8, 93.7],
                    ['10', 43.3, 85.8, 93.7],
                    ['15', 83.1, 73.4, 55.1],
                    ['20', 86.4, 65.2, 82.5],
                    ['25', 72.4, 53.9, 39.1],
                    ['30', 72.4, 53.9, 39.1],
                    ['35', 72.4, 53.9, 39.1],
                    ['40', 72.4, 53.9, 39.1],
                    ['45', 72.4, 53.9, 39.1],
                    ['50', 72.4, 53.9, 39.1],
                    ['55', 72.4, 53.9, 39.1],
                    ['60', 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {
                type: 'category',
                axisLine:{
                    lineStyle:{
                        color: '#555556',
                    }
                }
                    
            },
            yAxis: {
                axisLine:{
                    lineStyle:{
                        color: '#555556',
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#555556'],
                        width: 1,
                        type: 'solid',
                    },
                }
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        color: '#676867',
                    },
                },
                {
                    type: 'bar',
                    itemStyle: {
                        color: '#30ab6f',
                    },
                },
                {
                    type: 'bar',
                    itemStyle: {
                        color: '#cc3d1a',
                    },
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        // this.myChart.setOption(option);
        myChart.setOption(option);
        window.onresize = function () {
            console.log('reset')
            myChart.resize();
        }
        window.addEventListener("load", myChart.resize());
        
    }
  },
  mounted() {
      
  //   this.getChart();

  }
}
</script>

<style scoped lang="less">
</style>