<template>
  <div id="moreCmp2">
    <cmpTitle title="近半年故障率" position="absolute"></cmpTitle>
    <div id="moreCmp3" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
var  getsyzl=[            '2020/09/02', '2020/10/02', '2020/11/02', '2020/12/02', '2021/01/02',];
var  getwkrs=[826,673,588,782,779,855];
var  getlkrs=[686,703,788,882,779,785];
import cmpTitle from "../common/cmpTitle.vue"
  export default {
    components:{
      cmpTitle
    },
    name: 'moreCmp2',
    data () {
      return {
        option: {
            // backgroundColor:'#000',
            grid: {
                top: '20%',
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true
            },
        	// legend: {
        	// 	data: ['文科','理科'],
         //        right: "3%",
        	// 	top:"4%",
         //        textStyle: {
         //            color: "#A1D5FF",
        	// 		fontSize: 12
         //        },
        	// 	itemWidth: 12,  // 设置宽度
        	// 	itemHeight:16, // 设置高度
        	// 	itemGap: 12 // 设置间距
         //    },
            xAxis: [{
                data: getsyzl,
                axisLabel: {
                    margin: 10,
                    color: '#A1D5FF',
                    textStyle: {
                        fontSize: 12
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: '#102E74',
                    }
                },
                axisTick: {
                    show: false
                },
            }],
            yAxis: [{
                              minInterval:1,
        	    type:'value',
        	    axisLabel: {
                    color: '#A1D5FF',
                    textStyle: {
                        fontSize: 12
                    },
                },
                axisLine: {
                    show:false,
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#102E74',
                    }
                }
            }],
            series: [
        	{
        		name: "",
                type: 'bar',
                data: getwkrs,
                barWidth: '12px',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(85,244,255,0.9)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'transparent' // 100% 处的颜色
                        }], false),
                        barBorderRadius: [30, 30, 0, 0],
                    }
                },
            },{
        		name: "",
                type: 'bar',
                data: getlkrs,
                barWidth: '12px',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(85,101,255,0.9)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'transparent' // 100% 处的颜色
                        }], false),
                        barBorderRadius: [30, 30, 0, 0],
                    }
                },
            }
            ]
        }
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('moreCmp3'))
          // 绘制图表
          myChart.setOption(this.option);
      },

    }
  }
</script>

<style lang="less">
  #moreCmp2{
    width: 100%;
    height:100%;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    .chart-name {
      position: absolute;
      right: 70px;
      text-align: right;
      font-size: 16px;
      font-weight: bold;
      top: 0;
    }
  }
</style>
