<template>
  <div id="lineCmp1">
    <cmpTitle title="近半年故障率" position="absolute"></cmpTitle>
    <div id="cmp1" style="width: 100%;height:100%;"></div>
  </div>
</template>
<script>
import cmpTitle from "../common/cmpTitle.vue"
  export default {
    components:{
      cmpTitle
    },
    name: 'lineCmp1',
    data () {
      return {
        option : {
          // backgroundColor: '#394056',
          // title: {
          //     text: '',
          //     textStyle: {
          //         fontWeight: 'normal',
          //         fontSize: 16,
          //         color: '#F1F1F3'
          //     },
          //     left: '6%'
          // },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  lineStyle: {
                      color: '#57617B'
                  }
              }
          },
          // legend: {
          //     icon: 'rect',
          //     itemWidth: 14,
          //     itemHeight: 5,
          //     itemGap: 13,
          //     data: [],
          //     left: '4%',
          //     textStyle: {
          //         fontSize: 12,
          //         color: '#F1F1F3'
          //     }
          // },
          grid: {
              top:'20%',
              left: '5%',
              right: '5%',
              bottom: '5%',
              containLabel: true
          },
          xAxis: [{
              type: 'category',
              boundaryGap: false,
              axisLine: {
                  lineStyle: {
                      color: '#A1D5FF'
                  }
              },
              
              data: ['2020/09/02', '2020/10/02', '2020/11/02', '2020/12/02', '2021/01/02',]
          }],
          yAxis: [{
              type: 'value',
              axisTick: {
                  show: false
              },
              axisLine: {
                  lineStyle: {
                      color: '#A1D5FF'
                  }
              },
              axisLabel: {
                  textStyle: {
                      fontSize: 10
                  }
              },
              splitLine: {
                  lineStyle: {
                      color: 'rgba(255,255,255,0.2)'
                  }
              }
          }],
          series: [{
              name: '',
              type: 'line',
              smooth: true,
              lineStyle: {
                  normal: {
                      width: 1
                  }
              },
              areaStyle: {
                  normal: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'rgba(0, 136, 212, 0.3)'
                      }, {
                          offset: 0.8,
                          color: 'rgba(0, 136, 212, 0)'
                      }], false),
                      shadowColor: 'rgba(0, 0, 0, 0.1)',
                      shadowBlur: 10
                  }
              },
              itemStyle: {
                  normal: {
                      color: 'rgb(0,136,212)'
                  }
              },
              data: [97.3,99.2,99.3,100.0,99.6,90.6]
          },]
        }
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
          // 基于准备好的dom，初始化echarts实例
          let myChart = this.$echarts.init(document.getElementById('cmp1'))
          // 绘制图表
          myChart.setOption(this.option);
      },

    }
  }
</script>

<style lang="less">
  #lineCmp1{
    width: 100%;
    height:100%;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
  }
</style>
