<template>
  <div class="staff-archives-charts">
    <div class="staff-archives-title">{{title}}</div>
    <div>
      <ve-ring
        height="300px"
        :data="dataInfo"
        :extend="color.length>0?Object.assign({},chartExtend,{color}):chartExtend"
        :settings="chartSettings"
      ></ve-ring>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      dataInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      title: {
        type: String,
        default: () => '分布'
      },
      color: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        chartExtend: {
          legend: {
            x: 'center',
            y: '85%',
            show: false // 是否展示图例
          },
          series: {
            center: ['50%', '40%'],
            itemStyle: {
              borderWidth: 2, // 设置border的宽度有多大
              borderColor: '#fff'
            }
          }
        },
        chartSettings: {
          radius: ['60px', '80px'],
          itemStyle: {
            textAlign: 'center'
          },
          label: {
            formatter: params => {
              // if (params.data.value === 0) return ''
              return `{a|${params.data.name} (${params.data.value}人})`
            },
            rich: {
              a: {
                textAlign: 'center'
              }
            }
          },
          labelLine: {
          }
        }
      }
    },
    computed: {},
    beforeMount () { },
    mounted () { },
    methods: {},
    watch: {}

  }
</script>

<style lang='scss' scoped>
  .staff-archives-charts {
    // width: 50%;
  }
</style>


<!--

<
<template>
  <div class="staff-archives-charts">
    <div class="staff-archives-title">{{title}}</div>
    <div :id="aId" :data="dataInfo" style="min-height: 250px;"></div>
  </div>
</template>

<script>
  var echarts = require('echarts')
  export default {
    props: {
      aId: {
        type: String,
        default: 'mycharts'
      },
      dataInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
      title: {
        type: String,
        default: () => '分布'
      }
    },
    data () {
      return {
        datas: {
          data: [
            {value: 335, name: '直接访问'},
            {value: 310, name: '邮件营销'},
            {value: 234, name: '联盟广告'},
            {value: 135, name: '视频广告'},
            {value: 1548, name: '搜索引擎'}
          ]
        }
      }
    },
    mounted () {
      var legendData = []
      for (var i in this.dataInfo.rows) {
        legendData.push(this.dataInfo.rows[i])
      }
      var option = {
        title: {
          text: this.datas.text,
          textStyle: {color: '#333'},
          subtext: this.datas.subtext,
          subtextStyle: {color: '#aaa'},
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: legendData
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: this.dataInfo.rows,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      var myChart = echarts.init(document.getElementById(this.aId))
      myChart.setOption(option)
      window.onresize = echarts.getInstanceByDom(document.getElementById(this.aId)).resize()
    }
  }
</script>


<style scoped>
  .echarts-content{
    width:100%;
    min-height:78px;
    max-height:300px;
    background:#fff;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,.1);
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    padding:0 30px;
  }
  .echarts-content .chart-head{
    height:78px;
    width:100%;
    padding-top:30px;

  }
  .echarts-content .chart-head p{
    display:inline-block;
    height:21px;
    width:100%;
    cursor:pointer;
    text-align:center;

  }
  .echarts-content .chart-head p strong{
    font-weight:normal;
    font-size:16px;
    color:#999;
  }
  .echarts-content .chart-head p em{
    display:inline-block;
    font-style:normal;
    font-size:14px;
    color:#999;
  }
  .echarts-content .chart-head p i{
    display:inline-block;
    color:#e4e4e4;
    font-size: 14px;
    margin-left:10px;

  }

  .echarts-content .chart-main{
    width:100%;
    height:222px;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    -o-transition: height 0.6s;
    transition: height 0.6s;

  }
  .echarts-content .chart-main .chart-main-left{
    width:calc(100% - 20px);
    height:100%;
    float:left;
  }
  .echarts-content .chart-main .chart-main-right{
    width:20px;
    height:100%;
    float:right;
    padding-top:50px;
  }
  .echarts-content .chart-main .chart-main-right span{
    display:inline-block;
    width:12px;
    height:12px;
    background:#e4e4e4;
    border-radius:100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    cursor:pointer;
  }
  .echarts-content .chart-main .chart-main-right span:hover{
    background:#0188fd;
  }
  .echarts-content .chart-main .chart-main-right .spanActive{
    background:#0188fd;
  }
</style>

-->
