<template>
  <div id="pieCmp2" @click="jump">
    <cmpTitle title="车辆占比(车次)" position="absolute"></cmpTitle>
    <dv-charts :option="option" style="padding-top: 20px;"/>
  </div>
</template>

<script>
  import cmpTitle from "../common/cmpTitle.vue"
export default {
  components:{
    cmpTitle
  },
  name: 'pieCmp2',
  data () {
    return {
      option: {
        series: [
          {
            type: 'pie',
            data: [
              { name: '外部车辆', value: 0, radius: ['50%', '53%'] },
              { name: '内部车辆', value: 65, radius: ['52%', '55%'] }
            ],
            outsideLabel: {
              labelLineEndLength: 20,
              formatter: '{percent}%\n{name}',
              style: {
                fill: '#fff'
              }
            }
          },
          {
            name: '',
            type: 'pie',
            data: [
              { value: 10, radius: ['70%', '73%'] }
            ],
            outsideLabel: {
              show: false
            },
            pieStyle: {
              fill: 'rgba(255, 255, 255, 0.2)'
            }
          },
          {
            name: '',
            type: 'pie',
            data: [
              { value: 10, radius: ['65%', '66%'] }
            ],
            outsideLabel: {
              show: false
            },
            pieStyle: {
              fill: 'rgba(255, 255, 255, 0.2)'
            }
          }
        ],
        color: ['#00c0ff', '#3de7c9'],
        legend: {
          data: ['外部车辆', '内部车辆'],
          orient: 'vertical'
        },
      }
    }
  },
  methods:{
    jump(){
       this.$router.push({path:'/community/car'})
    }
  }
}
</script>

<style lang="less">
  #pieCmp2{
    width: 100%;
    height:100%;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
  }
</style>
