double-11-list-carousel-column-chart

Chart style

The Double 11 carousel list column chart is a column chart variant that displays multiple content items with a page-turning animation, ideal for showcasing product information during Double 11 promotions.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

• Size: the width and height of the widget, in pixels.

• Positioning: the x-axis and y-axis coordinates of the widget, in pixels. X-coordinate is the pixel distance from the upper-left corner of the widget to the left edge of the canvas. Y-coordinate is the pixel distance from the upper-left corner of the widget to the top edge of the canvas.

• Rotate: the rotation angle of the widget, in degrees.

  • Enter the rotation angle directly in the spin box, or click the plus (+) or minus (-) sign to adjust the value.

  • Click the icon to flip the widget style.

  • Click the icon to flip the widget style.

• Opacity: valid values: 0 to 1. A value of 0 hides the widget. A value of 1 makes the widget fully visible. Default value: 1.

• Global Style

  Parameter	Description
  Font	The font used for text in the widget. Default value: Microsoft YaHei.
  Top Spacing	The spacing from the top of each column, in px.
  Left Spacing	The spacing from the left side of each column, in px.
  Line Spacing	The vertical spacing between columns, in px.
  Quantity	The number of columns displayed per page, determined by both the configuration and data items. For example, if number is set to 5: when the data panel contains 5 or fewer items, the page shows that number of columns; when it contains more than 5, the page shows the configured number.
  Height	The height of each column, in pixels.
  Pagination	Turn on this switch to enable a page-turning effect during the carousel.
  Page Animation Time	The duration of each page-turning animation, in ms. Valid only when pagination is enabled.
  Pause Time	The pause duration between page-turning animations, in ms. Valid only when pagination is enabled.
  Next Frame	The interval between frames in the page-turning animation, typically set to a decimal representing the percentage of the animation duration.
  Faster Frame	The overlap duration between each frame and the previous frame in the page-turning animation, typically set to a decimal representing the percentage of the animation duration.

• Serial Number: the serial number displayed for each column. Click the icon to show or hide serial numbers.

  • Text: the text style of the serial number.

    Parameter	Description
    Font size	The font size of the serial number text.
    Color	The color of the serial number text. For more information, see color picker instructions.
    Interval	The distance between the sequence number background block and the carousel content. Unit: px.
    Width	The width of the sequence number background block. Unit: px.
    Fillet	The corner radius of the serial number background block, in px. A value of 0 produces square corners. Larger values produce more rounded corners.

  • Background Color: the background color of the sequence number.

  • Style: the style of the serial number text. Valid values: 1, No.1, and (1).

• Content: the text style of each column in the column chart.

  Parameter	Description
  Text	The font size and color of the content text.
  Marquee component	Enables a marquee effect for text that exceeds the column width, scrolling the text to display the full content. Set the animation duration in ms. Click the icon to enable or disable the marquee.

• Column Chart: the column style. Click the icon to show or hide the column chart.

  Parameter	Description
  Color	Click the or icon on the right to add or remove a data series color. The column is filled with multiple colors from left to right. Click the or icon to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configurations and add a data series with the same configurations. Position: the proportion of the color position in the gradient band. Valid values: 0 to 1. Color: the color of the position in the gradient.
  Fillet	The corner radius of the column, in pixels. A value of 0 produces square corners. Larger values produce more rounded corners.
  Color gradient range	The gradient range of the column. Valid values: Local Gradient and Global Gradient.

• Streamed: the streamer animation style. Click the icon to show or hide the streamer effect.

  Parameter	Description
  Animation Time (ms)	The total duration of the streamer animation during the carousel, in ms.
  Pause Time (ms)	The pause interval between streamer animations, in ms.

• Background: the background style of the column chart.

  Parameter	Description
  Color	The background color of the content bar chart. Note When a value is smaller than the largest value, the remaining portion of the column is filled with this color.
  Fillet	The corner radius of the column background, in pixels. A value of 0 produces square corners. Larger values produce more rounded corners.

Data Sources panel

Advanced Panel

No event configuration is available for this component.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. Refer to the blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	Triggered after a data interface request is responded and processed by a filter, with the processed JSON data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.

   • Action

     Action	Description
     Import data	Imports pre-processed data in the widget's drawing format for redrawing without requesting server data again. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.
     Request Data Interface	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the carousel list column chart is configured with the API data source https://api.test and the data passed to request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Move	Moves the widget to a specified location. Example data: { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Display	Toggles the widget between visible and hidden states. No parameters are required.
     Display	Shows the widget. Example data: { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. Example data: { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates the widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data. Then modify the style field for the data processing node in Blueprint Editor.