<!-- 圆柱柱状图 -->
<template>
  <div class="oblongBox" :style="{height:barHeight }">
    <div class="chartsdom" id="cylindrical">
    </div>
    <div class="title"><span class="label">商品总额</span><span class="value">{{ total }}</span></div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'

export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  components: {
    boxTop,
  },
  props: {
    barHeight: {
      type: String,
      default: `200px`,
    },
    area: {
      type: Array,
    },
    total: {
      type: String || Number,
    },
    dataArray: {
      type: Array,
    },
    unit: {
      type: String,
    },
  },
  mounted() {
    this.getEchart()
  },
  watch: {
    dataArray() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(`cylindrical`))

      this.option = {
        xAxis: {
          axisLabel: {

            rotate: 45,
            color: '#29d0d0'
          },
          type: 'category',
          data: ['商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型', '商品类型']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFE3"
                  },
                  {
                    offset: 1,
                    color: "#4693EC"
                  }
                ])
              }
            },
          }
        ]
      }
      myChart.setOption(this.option, true)
    },
  },
}
</script>

<style lang="less" scoped>
.oblongBox {
  width: 460px;
  height: 234px;
  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);

  .chartsdom {
    position: relative;
    width: 100%;
    height: 105%;
  }

  .title {
    position: absolute;
    top: 20px;
    left: 30px;
    display: flex;
    align-items: center;

    .label {
      font-weight: 500;
      font-size: 16px;
      color: #FFFFFF;
      margin: 0 12px;
    }

    .value {
      font-weight: bold;
      font-size: 24px;
      background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
