Vue 3D Circular Charts - Beautiful and Interactive Component

<template>
  <div class="control-section">
    <div align='center'>
        <ejs-circularchart3d style='display:block' align='center' id='chartcontainer'>
            <e-circularchart3d-series-collection>
                <e-circularchart3d-series :dataSource='seriesData' xName='x' yName='y'> </e-circularchart3d-series>
            </e-circularchart3d-series-collection>
        </ejs-circularchart3d>
    </div>
</div>

</template>
<style scoped>

</style>
<script>
import { Browser, EmitType } from '@syncfusion/ej2-base';
import { CircularChart3DComponent, CircularChart3DSeriesDirective, CircularChart3DSeriesCollectionDirective, PieSeries3D} from "@syncfusion/ej2-vue-charts";

export default {
  components: {
    'ejs-circularchart3d': CircularChart3DComponent,
    'e-circularchart3d-series-collection': CircularChart3DSeriesCollectionDirective,
    'e-circularchart3d-series': CircularChart3DSeriesDirective
  },
  data: function() {
    return {
      seriesData: [{ x: 'Tesla', y: 13 },{ x: 'Aion', y: 8 }, { x: 'Wuling', y: 7 }, { x: 'Changan', y: 5 }, { x: 'Geely', y: 4 }, { x: 'Nio', y: 3 }, { x: 'Neta', y: 2 }, { x: 'BMW', y: 1 } ]
    };
  },
  provide: {
    CircularChart3D: [PieSeries3D]
  },
  methods: {
  },
 
};
</script>