PrimeFaces Extensions Showcase

EChart

Apache ECharts supports custom theming such as the "vintage" theme in this example. See Apache ECharts Themes

Source

XHTML page


                <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>

Use Cases

Documentation pe:echart

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a namingContainer.
rendered	Boolean value to specify the rendering of the component, when Set false component will not be rendered.
binding	An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
value	JSON value of the chart.
style	Inline style of the component. Typically, height and width of the chart are defined here.
styleClass	Style class of the component.
theme	The theme to style the chart with. Can be a theme name imported in JS or "light" or "dark".
extender	Name of javascript function to extend the options of the underlying EChart plugin.