<template>
  <div class="chart-3">
    <div class="ring">
      <ve-ring :data="chartData" :settings="chartSettings"></ve-ring>
      <p class="title">系统用例百分比统计</p>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import VeRing from 'v-charts/lib/pie.min'
  /**
   * @author 白雨浓
   * @date 17-9-22 下午2:09
   *
   * 图表3 >> 根据系统统计用例数目
   **/
  export default{
    components: {VeRing},
    name: 'SisChart3',
    data(){
      return {
        chartData: {}
      }
    },
    created: function () {
      this.chartData = {
        columns: ['系统', '用例'],
        rows: []
      };
      this.chartSettings = {
        dimension: '系统',
        metrics: '用例'
      }
    },
    mounted(){
      this.$nextTick(() => {
        this.loadSystemUseExamplesData();
      })
    },
    methods: {
      /** 加载系统用例个数数据 */
      loadSystemUseExamplesData(){
        // this.$$get(`/chart/system/use_example/list`)
        //   .then(res => {
        //     if (res.data.code < 1)
        //       throw res.data.msg;
        //     res.data.data.forEach(val => this.chartData.rows.push({'系统': val.systemName, '用例': val.useExamplesNum}));
        //   })
        //   .catch(err => this.$$msg.err(err))
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .chart-3 {
    width 100%
    height 100%
    .ring {
      position relative
      margin 20px
      .title {
        position absolute
        display block

        width w = 300px
        height 30px

        left 50%
        bottom -20px

        margin-left -(w/ 2)

        text-align center
        color #666
      }
    }
  }
</style>
