gjerp_ui/src/views/kban/comps/MainGeYueChanLiang.vue

<template>
  <div class="ycl">
    <div class="ycl__title">各月份产量(吨)</div>
    <dv-conical-column-chart :config="config" />
  </div>
</template>

<script>
export default {
  name:'MainGeYueChanLiang',
  data(){
    return {
      config:{
        showValue:true,
        data: [
          {
            name: '1月',
            value: 71
          },
          {
            name: '2月',
            value: 55
          },
          {
            name: '3月',
            value: 120
          },
          {
            name: '4月',
            value: 66
          },
          {
            name: '5月',
            value: 80
          },
          {
            name: '6月',
            value: 95
          },
          {
            name: '7月',
            value: 90
          },
          {
            name: '8月',
            value: 90
          },
          {
            name: '9月',
            value: 32
          },
        ],
      }
    }
  }
}
</script>

<style scoped>
.ycl{
  width: 1070px;
  height: 378px;
  background: url('../../../assets/kban/gyclbg.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;

  .ycl__title{
    width: 231px;
    height: 41px;
    background: url('../../../assets/kban/cltitle.png') no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
    font-size: 20px;
    padding: 12px 26px;
    margin-left: 425px;
  }

  .dv-conical-column-chart{
    width: 90%;
    height: 308px;
    padding: 0 50px 0 50px;
  }
}
</style>