bubble-chart-for-double-11

Chart style

A Double 11 bubble chart is a basic chart type that maps bubble sizes to numerical values, allowing you to visually compare data across categories. For example, you can compare products such as mobile phones, food, clothes, and home appliances during Double 11 promotions.

Style Panel

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

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: Rotate the widget by degrees.

    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Global Style

  Parameter	Description
  Animation Time (s)	The playback duration of the bubble animation.
  Animation Mode	The animation easing mode for bubble playback, such as ease-in and ease-out.
  Interval	The spacing between bubbles. Unit: px.
  Coefficient	The scaling ratio of the bubble chart. A value of 1 indicates the original size.
  Horizontal displacement	The horizontal displacement of the bubble chart relative to the center of the widget. Unit: px.
  Vertical Displacement	The vertical displacement of the bubble chart relative to the center of the widget. Unit: px.

• Text Style

  Parameter	Description
  Color	The font color of the text. For more information, seecolor picker.
  Font	The font family of the text. Default value: Microsoft Black.
  Font weight	The font weight of the text.
  Maximum Font	The maximum font size, corresponding to text in the largest bubble. Font sizes for other bubbles are proportionally scaled between the maximum and minimum values.
  minimum font size	The minimum font size, corresponding to text in the smallest bubble. Font sizes for other bubbles are proportionally scaled between the maximum and minimum values.
  Labels	The label content displayed in each bubble. Select Value and Name. Click the icon to show or hide the label.
  Vertical Offset	The vertical offset of the content in the bubble. Unit: pixels.

• Node Style: Click the or icon to add or remove a data series. 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.

  Color: the color of the bubbles in the series.

Data Sources panel

Advanced Panel

This widget does not support interaction events.

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. View blueprint configuration parameters.

   • Event

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

   • Action

     Action	Description
     Import data	Imports data that has been processed in the widget's drawing format for redrawing, without requesting server data again. For specific data examples, see the Data Response Result section of 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 API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Move	Moves the widget to a specified location. For more information, see the data example. { // 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 whether the widget is displayed or hidden. No parameters are required.
     Display	Shows the widget. For more information, see the data example. { "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. For more information, see the data example. { "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 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.