Basic Pie Chart

Chart style

A basic pie chart is a type of pie chart in the mobile widget. It supports the label display of multiple arc sectors inside and outside the chart, and supports custom multi-series data configuration. It can clearly and intelligently display the proportion of each category in the circle.

Configuration Panel

• Search Configuration: Click Search Configuration in the upper-right corner of the Configuration panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for to quickly locate the configuration items. Fuzzy match is supported. For more information, see Search for asset configurations.

• Chart name

  • Custom Margin: the distance between the pie chart area and the four boundaries of the widget. The default unit is px. You can click the icon to specify the custom margin.

  • Legend: the legend style of the basic pie chart. You can click the icon to display the legend.

    Parameter	Description
    Click to filter	If you turn on the switch, when the widget is configured with multiple series data, use a mobile device in the preview or publish state of the widget, and click a legend of a series in the widget to switch the current series to the selected or unselected state, thus filtering and displaying data of different series in the visualization application. If you turn off the switch, data of different series cannot be filtered and displayed, and legend data of all series is displayed at the same time.
    No Color Selected	The legend color of each series when it is not selected.
    Layout	The layout style of the legend. You can adjust the position and alignment of the legend layout.
    Marker shape	The shape of the legend. Valid values: Circle and Square.
    Text	The text style of the legend. Font Size: the size of the legend text. Text weight: the weight of the legend text. Color: the color of the legend text. Alignment: the alignment of the legend text. You can select Center, Left, or Right.

• Coordinate Axis: You can select Radial Axis or Angular Axis.

  • Radial axis

    Radius

    Parameter	Description
    Outer radius	The distance from the outermost side of the ring to the center of the axis. The value is the proportion of the component height. Valid values: 0 to 1.
    Inner radius	The distance from the innermost side of the ring to the center of the axis. The value is the proportion of the component height. The value ranges from 0 to 1.

  • Angle Axis

    Angle: the start and end angles of the widget.

• Sector

  • Sectors: Click the or icon on the right to add or delete a sector data series. Click the or icon on the right to configure the arrangement style of multiple sectors. Click the icon to copy the current sector data series configuration and add a sector data series with the same configuration.

  • Slice Style: the color of the pie chart.

• Remarks

  • Easing Animation: the animation effect style of the chart. You can click the icon to enable or disable the animation effect.

    Parameter	Description
    Easing Effect	The easing effect of animation. The system provides a variety of common easing effects for you to choose from.
    Entry Animation Duration	The duration of the first animation rendered by the component. Unit: ms.
    Update the animation duration	The duration of the animation when the component data is updated. Unit: ms.

  • dialog box: The style of the dialog box that appears when you mouse over or click a sector on a preview or publish page. You can click the icon to turn the dialog box effect on or off.

    Parameter	Description
    Name	Turning on the switch dialog box display the name of the current sector; turning off the switch dialog box not display the name of the sector.
    Show Percentage	Turn on the switch to dialog box display the percentage value of the current sector; turn off the switch to dialog box not display the percentage value of the sector.
    Guide Line	dialog box the style of the leader line. Length: the length of the guide line. Valid values: 0 to 1. Width: the width of the guide line. Color: the color of the guide line.
    Text	The font size and color of the text in the dialog box.

Data dashboard

Interactive Panel

Select the Enable check box to enable interactions between widgets. When you click a slice block of the basic pie chart, a data request is triggered, a callback value is thrown, and data of different slices is dynamically loaded. By default, the name and value values in the data are thrown. For more information, see Component interaction configuration.

Blueprint Interaction

1. In the canvas editor, right-click a widget in the layer pane and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. In Blueprint Editor, click the Basic Pie Chart widget in the Added Nodes pane. You can view the basic pie chart configuration parameters on the canvas, as shown in the following figure.

   • Event

     Event	Description
     When the basic pie chart interface description request is completed	The event that is returned when the data interface request is completed and is processed by the filter. The event also throws the processed JSON-formatted data. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
     When the basic pie chart interface description request fails	The event that is returned when a data interface request fails (such as network problems or interface errors) and is processed by the filter. The event also throws the processed JSON data. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.
     When a data item is clicked	The event that is raised when a slice of a pie chart is clicked, along with the data item corresponding to that slice.

   • Action

     Action	Description
     Request basic pie chart interface description	This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source for a basic pie chart is https://api.test and the data passed to the Request Basic Pie Chart API Description action is { id: '1'}, the final request interface is https://api.test?id=1.
     Import Basic Pie Chart Interface Description	After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information about specific data examples, see the Data Response Result section of the Data tab in the right-side configuration panel of the canvas editor.