vue echarts玫瑰类型视图

<style>
  @import "../../css/style.css";
</style>
<style scoped>
  @import "../../css/vue_rose_pie.css";
</style>
<template>
  <div class="pieRound">
    <div class="content">
      <chart class="pie" :options="pieRound" >
      </chart>
      <button class="btn" @click="toPie">环形按钮</button>
    </div>

  </div>
</template>
<script>

    export default {
        data() {
            return {}
        },
      created(){
      },
      methods:{
        toPie(){
        //路由跳转
          this.$router.push({path:'/half_pie'})
        }

      },
      computed:{
        pieRound(){
          return{
            legend: {
              show: false,
              orient: 'vertical',
              x: 'left',
              data: ['狮子', '大象'
                , '猩猩','老虎','豹子']
            },
            graphic: {
              elements: [{
                type: 'image',
                style: {
                  width: 20,
                  height: 20
                },
                left: 'center',
                top: 'center'
              }]
            },
            series: [{
              type: 'pie',
              radius: [20, '70%'],
              center: ['50%', '50%'],
              roseType: 'radius',
              color: ['#ADC4C3', '#6AA19E', '#476F6E', '#026E69', '#235957'  ],
              data: [{
                value: 20,
                name: '狮子'
              }, {
                value: 25,
                name: '豹子'
              }, {
                value: 30,
                name: '猩猩'
              }, {
                value: 23,
                name: '老虎'
              }, {
                value: 43,
                name: '大象'
              }],
              label: {

                normal: {
                  textStyle: {
                    fontSize: 14
                  },
                  formatter: function(param) {
                    return param.name + ':\n' + Math.round(param.percent) + '%';
                  }
                }
              },
              labelLine: {
                normal: {
                  smooth: true,
                  lineStyle: {
                    width: 2
                  }
                }
              },
              itemStyle: {
                //图形阴影
                normal: {
                  shadowBlur: 30,
                  shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function(idx) {
                return Math.random() * 200;
              }
            }]

          }
        }
      }
    }

</script>