This topic describes the chart style of the basic area chart in mobile widgets and the features of the configuration panel.
Chart style
The basic area chart is a type of line chart in mobile widgets. It supports custom y-axis intervals and multi-series data configuration. It intelligently displays the trend of multidimensional real-time data by combining lines and areas.
Configuration panel
-
Search Configuration: Click the Style icon
in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item. Chart
Custom Margin: The distance between the area of the area chart and the four boundaries of the widget. The default unit is px. You can click the
icon to control the visibility of the custom margin.Data Point: The style of data points within the chart of the basic area chart. You can click the
icon to control the visibility of data points.Parameter
Description
Shape
The shape of the data point. Options include Filled Circle and Square.
Size
The size value of the data point.
Outline
The outline style of the data point, including adjusting the color and width of the data point outline.
Legend: The style of the legend in the basic area chart. You can click the
icon to control the visibility of the legend.Parameter
Description
Click Filter
Turn on the switch. When the widget is configured with multi-series data, you can use a mobile device to click the legend of a series in the widget during preview or publish status to switch the current series to selected or unselected status, thereby filtering and displaying different series of data in the visualization application. If the switch is turned off, you cannot filter and switch the display of different series data. All series legend data are displayed simultaneously.
Unselected Color
The color of the legend for 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.
Mark Shape
The mark shape style of the legend. Options include Circle and Square.
Text
The text style of the legend.
Font Size: The size of the legend text.
Font Weight: The weight of the legend text.
Color: The color of the legend text.
Alignment: The alignment of the legend text. Options include Align Center, Align Left, and Align Right.
Axis: The component axis includes X-axis and Y-axis.
X-axis
Display: Turn on the switch to make the x-axis style visible in the component. Turn off the switch to make the x-axis style invisible.
Type: The type of x-axis label data. Options include Numeric, Category, and Time.
NoteInconsistent data format and data type settings will cause abnormal component display.
Parameter
Description
Numeric
Supports data of numeric types such as integers and floating-point numbers.
Category
Supports data of category types such as characters and strings.
Time
Data of time type requires configuration of data format.
Tick Count: The number of ticks on the x-axis within the component.
Optimize Tick: Turn on the switch to automatically optimize the ticks on the x-axis within the component. Turn off the switch to manually adjust the maximum and minimum values of the ticks on the x-axis within the component. This configuration is only displayed when the x-axis type is set to Numeric.
Offset: The proportion of blank space at both ends of the x-axis. The value range is 0 to 1.
Axis Label: The style of the x-axis axis label in the area chart. You can click the
icon to control the visibility of the x-axis axis label.Parameter
Description
Display Format
The style of the display format of the x-axis axis label content. When the x-axis type is numeric, options include Original Value, 11 (integer), 11.1 (floating-point Number), and 11.11 (floating-point Number). When the x-axis type is Time, different time display styles are available. This configuration is only displayed when the x-axis type is set to Numeric or Time.
Label Offset
The vertical displacement distance of the x-axis axis label, in px.
Text
The font size, font weight, color, and alignment style of the x-axis axis label text.
Grid: The style of the x-axis gridline. You can click the
icon to control the visibility of the x-axis gridline.Parameter
Description
Color
The color of the x-axis gridline.
Width
The width value of the x-axis gridline.
Line Type
The line type of the x-axis gridline. Options include Solid Line, Dashed Line, or Dotted Line.
Axis Line: The style of the x-axis axis line. You can click the
icon to control the visibility of the x-axis axis line.Parameter
Description
Color
The color of the x-axis axis line.
Width
The width value of the x-axis axis line.
Line Type
The line type of the x-axis axis line. Options include Solid Line, Dashed Line, or Dotted Line.
Tick Line: The style of the x-axis tick line. You can click the
icon to control the visibility of the x-axis tick line.Parameter
Description
Color
The color of the x-axis tick line.
Line Type
The line type of the x-axis tick line. Options include Solid Line, Dashed Line, or Dotted Line.
Width
The width value of the x-axis tick line.
Length
The length value of the x-axis tick line.
Y-axis
Display: Turn on the switch to make the y-axis style visible in the component. Turn off the switch to make the y-axis style invisible.
Tick Count: The number of ticks on the y-axis within the component.
Optimize Tick: Turn on the switch to automatically optimize the ticks on the y-axis within the component. Turn off the switch to manually adjust the maximum and minimum values of the ticks on the y-axis within the component.
Offset: The proportion of blank space at both ends of the y-axis. The value range is 0 to 1.
Axis Label: The style of the y-axis axis label in the area chart. You can click the
icon to control the visibility of the y-axis axis label.Parameter
Description
Display Format
The style of the display format of the y-axis axis label value. Options include Original Value, 11 (integer), 11.1 (floating-point Number), and 11.11 (floating-point Number).
Label Offset
The vertical displacement distance of the y-axis axis label, in px.
Text
The font size, font weight, color, and alignment style of the y-axis axis label text.
Grid: The style of the y-axis gridline. You can click the
icon to control the visibility of the y-axis gridline.Parameter
Description
Color
The color of the y-axis gridline.
Width
The width value of the y-axis gridline.
Line Type
The line type of the y-axis gridline. Options include Solid Line, Dashed Line, or Dotted Line.
Axis Line: The style of the y-axis axis line. You can click the
icon to control the visibility of the y-axis axis line.Parameter
Description
Color
The color of the y-axis axis line.
Width
The width value of the y-axis axis line.
Line Type
The line type of the y-axis axis line. Options include Solid Line, Dashed Line, or Dotted Line.
Tick Line: The style of the y-axis tick line. You can click the
icon to control the visibility of the y-axis tick line.Parameter
Description
Color
The color of the y-axis tick line.
Line Type
The line type of the y-axis tick line. Options include Solid Line, Dashed Line, or Dotted Line.
Width
The width value of the y-axis tick line.
Length
The length value of the y-axis tick line.
Edition
Data Series: Click the
or icon on the right to add or delete a data series. Click the or icon on the right to configure the arrangement style of multiple data series.Smooth Curve: Turn on the switch to enable the smooth curve style. Turn off the switch to display the curve as a line style.
Area Style: The color of the area under this series.
Line Style: The style of the line under this series.
Parameter
Description
Color
The color of the line.
Width
The width of the line.
Others
Easing Animation: The style of the chart's animation effect. You can click the
icon to toggle the animation effect on or off.Parameter
Description
Easing Effect
The easing effect of the animation. The system provides a variety of common animation easing effects for selection.
Entrance Animation
The duration of the initial rendering animation of the component, in milliseconds.
Update Animation
The duration of the animation when the component data is refreshed, in milliseconds.
Tooltip: The style of the tooltip that appears when hovering over or clicking the line dot in the area chart during preview or publish page. You can click the
icon to toggle the tooltip effect on or off.Parameter
Description
Series Name
The font size and color of the series name displayed in the tooltip.
Data Value
The font size and color of the data value displayed in the tooltip.
Auxiliary Line
Toggle the auxiliary line effect of the tooltip on or off by clicking the
icon.Width: The width of the auxiliary line of the tooltip.
Line Type: The style of the auxiliary line of the tooltip. Options include Solid Line, Dashed Line, or Dotted Line.
Color: The color of the auxiliary line of the tooltip.
Background Box
The background box style of the tooltip.
Border Radius: The border radius of the tooltip's background box, in pixels. A value of 0 results in a square box, while a larger value creates a more rounded border.
Color: The background color of the tooltip.
or 
icon on the right to add or delete a data series. Click the 
or 
icon on the right to configure the arrangement style of multiple data series.Data tab
Field | Description |
| The category of each dot in the line chart, corresponding to the x-axis coordinate value. The field type and format must align with the x-axis label type and format in the configuration item. |
| The value of each dot in the line chart, corresponding to the y-axis value. |
| (Optional) The series value. |
|
Configuration Item |
Description |
|
Controlled Mode |
When enabled, the component will not request data upon initialization. Instead, it will only initiate data requests through callback IDs or methods configured in the blueprint editor. When disabled, automatic update requests are possible. The default setting is disabled. |
|
Automatic Update Request |
When enabled, you can set dynamic polling and manually enter the polling frequency. When disabled, automatic updates will not occur. Manual page refresh or data request triggers through the blueprint editor and callback ID events are required for updates. |
|
Data Source |
Click Configure Data Source to modify the data source type and query code in the Set Data Source panel, preview the return results, and view the data response results. For more information, see component data source configuration. |
|
Data Filter |
The data filter provides data structure transformation, filtering, and basic calculation functions. Click Add Filter to configure the data filter script in the Set Data Source panel. For more information, see using data filters. |
|
Data Response Result |
Displays the response results of data requests. When the data source changes, you can click the icon on the right |
to view the data response results in real-time.Interaction panel
Select Enable to activate the component interaction feature. When you click the dot in the area chart, it will trigger a data request and throw a callback value to dynamically load the data of different dots. By default, the x value in the data is thrown. For specific configuration, see component interaction configuration.
Blueprint interaction
On the mobile canvas editor page, right-click the component in the layer bar and select Export To Blueprint Editor.
Click the
icon in the upper left corner of the page.On the blueprint editor configuration page, click the Basic Area Chart component in the import node bar. You can see the blueprint editor configuration parameters of the area chart on the canvas.
Event
Event
Description
When The Basic Area Chart Interface Description Request Is Completed
The event thrown after the data interface request is returned and processed by the filter, and the processed JSON format data is thrown simultaneously. For specific data examples, see the Data tab in the configuration panel on the right side of the component in the canvas editor and the Data Response Result area.
When The Basic Area Chart Interface Description Request Fails
The event thrown after the data interface request fails (the request failure may be due to network issues or interface errors, etc.) and is processed by the filter, and the processed JSON format data is thrown simultaneously. For specific data examples, see the Data tab in the configuration panel on the right side of the component in the canvas editor and the Data Response Result area.
When Clicking The Data Item
The event thrown when clicking the data point in the area chart, and the corresponding data item of the dot is thrown simultaneously.
Action
Action
Description
Request Basic Area Chart Interface Description
Re-request server-side data. The data thrown by the upstream data processing node or layer node will be used as parameters. For example, if the basic area chart is configured with an API data source as
https://api.test, the data passed to the Request Basic Area Chart Interface Description action is{ id: '1'}, then the final request interface ishttps://api.test?id=1.Import Basic Area Chart Interface Description
After processing the data according to the component rendering format, import the component and redraw it. There is no need to re-request server-side data. For specific data examples, see the Data tab in the configuration panel on the right side of the component in the canvas editor and the Data Response Result area.
icon in the upper left corner of the page.