<template>
<!-- 状态统计 -->
<div class="containerBox">
    <div class="titleTxt">{{ title }}</div>
    <div class="mychart">
      <JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid" :title="{ text: '全部' }" />
    </div>

</div>
</template>

<script>
import JBarChart from '../jChart/bar/JBarChart.vue'
export default {
  components: { JBarChart },

  props: {
    title: {
      type: String,
      default: "default title"
    }
  },
  data() {
    return {
      xData:['未开始','进行中','已完成','延期'],
      yData:[
        {
          value: 170,
          itemStyle: {
            color: '#a9adb6'
          }
        },
        {
          value: 320,
          itemStyle: {
            color: '#557dee'
          }
        },
        {
          value: 270,
          itemStyle: {
            color: '#43d7b5'
          }
        },
        {
          value: 310,
          itemStyle: {
            color: '#ff6c7f'
          }
        }],
      color:['#a9adb6','#557dee','#43d7b5','#ff6c7f'],
      grid:['10%','5%','7%','5%']
    };
  },


}
</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: 95%;
  }
}
</style>

