<template>
  <div class="content">
    <div class="card" style="border-bottom-right-radius: 20%">
      <p class="chartTitle">A产线</p>
      <div class="imgcss">
        <div class="img-left"></div>
        <div class="img-right"></div>
      </div>
      <div id="monthA" class="bar"></div>
    </div>
    <div class="card" style="border-bottom-left-radius: 20%">
      <p class="chartTitle">缺陷总量排名</p>
      <div class="imgcss">
        <div class="img-left"></div>
        <div class="img-right"></div>
      </div>
      <div id="monthAll" class="bar"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.initChart()
    this.pieChart()
  },
  methods: {
    beforeDestroy () {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    initChart () {
      this.chart = echarts.init(document.getElementById('monthAll'))
      this.chart.setOption(
        {
          grid: {
            left: 50,
            top: 23
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              interval: 0,
              rotate: 40
            },
            data: ['擦划伤', '脏污', '崩边', '气泡', '凹凸物']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [518, 400, 289, 123, 24],
            type: 'bar',
            showBackground: true,
            barWidth: '35%',
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: function (params) {
                var colorList = ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40']
                return colorList[params.dataIndex]
              }
            },
            backgroundStyle: {
              color: 'rgba(220, 220, 220, 0.4)'
            }
          }]
        }
      )
    },
    pieChart () {
      echarts.init(document.getElementById('monthA')).setOption(
        {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            icon: 'circle',
            top: '15%',
            right: '10%'
          },
          color: ['#2760FF', '#8167F6', '#5B9BFF', '#FFD160', '#FF8A40'],
          series: [
            {
              name: 'Access From',
              center: ['35%', '43%'],
              type: 'pie',
              radius: '75%',
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 123, name: '擦划伤' },
                { value: 122, name: '脏污' },
                { value: 67, name: '崩边' },
                { value: 42, name: '气泡' },
                { value: 12, name: '凹凸物' }
              ]
            }
          ]
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
    display: flex;
    justify-content: space-around;
    margin-top: 0.1rem;
    font-size: 0.135rem;

    .card{
      width: 3.4rem;
      height: 63vh;
      background-color: white;
      border-radius: 5%;
      text-align: center;
      color: #276BFF;
      font-size: 0.16rem;
      font-weight: 600;
      opacity: 0.8;

      .chartTitle{
        margin: 5vh auto 0.5vh 0.25rem;
        text-align: left;
      }

      .imgcss{
        display: flex;
        width: 0.8rem;
        height: 0.8vh;
        margin-left: 0.25rem;

        .img-left{
          width: 0.1rem;
          background-color: #276BFF;
        }

        .img-right{
          width: 0.64rem;
          margin-left: 0.01rem;
          // background-color: #276BFF;
          background: linear-gradient(to right, #276BFF 0%, #FFFFFF 100%);
        }
      }
    }

    .bar{
      width: 3.4rem;
      height: 60vh;
    }
  }
</style>
