<template>
  <div>
    <div class="label">咨询原因top5</div>
    <div id="consultation" ></div>
  </div>
</template>

<script>
  export default {
    name: "ReasonConsultation",
    methods:{
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('consultation'))
        var scale=0.8
        var visits = [92, 102, 89,100,150]
        var grade = ['漏气','卡表故障','管道故障' ,'调压箱故障','壁挂炉故障']
        var data = {
          grade: grade,
          visits: visits,
        }
        this.xc.setOption({
          title: [
            {
              // text: '用户气量对比',
              textStyle: {
                align: 'left',
                color: '#fff',
                fontSize: 14*scale
              }
            }],
          grid: {
            left:'25%',
            right: '10%',
            height:'80%',

            top: '4%',
            bottom: '0'
          },
          xAxis: {
            show: false,
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              // margin: 10,
              show: true,
              color: '#69d8d2',
              fontSize: 12*scale
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: data.grade
          },
          series: [{
            type: 'bar',
            barGap: '-99%',
            barWidth: '30%',
            itemStyle: {
              normal: {
                barBorderRadius: 12*scale,
                color: {
                  type: 'linear',
                  x: 0,
                  x1: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#69d8d2'
                  }, {
                    offset: 1,
                    color: '#69d8d2'
                  }]
                }
              },
            },
            max: 1,
            labelLine: {
              show: true,
            },
            label: {
              show: true,
              position: 'right',
              textStyle: { //数值样式
                color: '#69d8d2',
                fontSize: 12 * scale
              }
            },
            data: data.visits,
          }]
        })
      },
    },
    ready() {
      this.setBar()
    }
  }
</script>

<style scoped>
  .label{
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }
  #consultation{
    height: 91%;
    width: 100%;
    padding: 2% ;
  }
</style>
