<template>
<!-- 质量问题 -->
  <div class="containerBox">
    <div class="titleTxt">{{ title }}</div>
    <div class="myChart">
      <problemChart 
      :title="{  subTitle: '隐患类别', y: '30%'}" 
      :color="['#3cabfd', '#58ec72', '#f294c6', '#f43a8d', '#6ee4f0']" 
      :data="[
            { value: 15, name: '文明施工' },
            { value: 2, name: '未分类' },
            { value: 5, name: '安全管理' },
            { value: 6, name: '施工安全' },
            { value: 20, name: '基础工程' },
          ]" />
    </div>
  </div>
</template>

<script>
import problemChart from '../jChart/pie/problemChart.vue'
export default {
  components:{problemChart},
  props: {
    title: {
      type: String,
      default: "default title"
    }
  },
}
</script>

<style lang="less" scoped>
.containerBox {
  width: 100%;
  height: 100%;
  border: 1px solid #0081c3;

  .titleTxt {
    font-size: 18px;
    color: #6ee4f0;
    margin-top: 5px;
    margin-left: 5px;
  }
  .myChart {
    width: 100%;
    height: 100%;
  }
}
</style>