<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/theme/vintage.min.js" integrity="sha512-P+U5OY6oUfmfXUqI9x5V18WdC5ujPMTOZJHC/BZ9nE+rihTUIZnjP1dveK6x3KTVocEW+9xEasqXXjOPciyupg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <pe:echart style="width: 50vw; height: 400px;"  widgetVar="themeEChart" theme="vintage">
        <p:ajax event="itemSelect" listener="#{eChartController.itemSelect}" />
        <f:facet name="value">
{
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '70%'],
      // adjust the start and end angle
      startAngle: 180,
      endAngle: 360,
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
}
        </f:facet>
    </pe:echart>