DocsICP FilingConsole
官方文档
首页

ECharts candlestick chart

更新时间：
复制 MD 格式
产品详情
我的收藏

Configure chart styles, data sources, and interactions for the ECharts candlestick chart widget.

Chart style

Style panelimage.png

  • Search Configuration: Click the Style icon image 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.

    • Size: The width and height of the component in pixels (px).

    • Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.

    • Rotation: The rotation of the component around its center point, in degrees (°).

      • Enter an angle value to control the component's rotation.

      • Click the image icon to flip the component horizontally.

      • Click the image icon to flip the component vertically.

    • Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.

    • Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.

    • Alignment: The alignment of the component within the editor.

  • Legend: Click the Eye icon on the right to view the legend style.

    • Left: The distance between the legend and the left border of the widget. The default value is 25%. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Top: The distance between the legend and the top border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Right: The distance between the legend and the right border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Bottom: The distance between the legend and the bottom border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Width: You can enter a value to adjust the width of the legend. The default value is auto, which automatically adjusts the width.

    • Height: You can enter a value to adjust the height of the legend. The default value is auto, which automatically adjusts the height.

    • Orientation: From the drop-down list, you can select the layout orientation of the legend.

      • Horizontal: The legend items are arranged horizontally.

      • Vertical: The legend items are arranged vertically.

    • Align: From the drop-down list, you can select the alignment of the legend markers and text.

      • Left Align: The alignment is Left Align when the graphic is to the left of the text.

      • Center: The markers and text are center-aligned and overlap.

      • Right Align: The alignment is set to Right Align when the graphic is to the right of the text.

    • Padding: Click + or -, or enter a value to adjust the padding of the legend. The unit is px. The default padding for all sides is 5.

    • Item Gap: Click + or -, or enter a value to adjust the distance between each item in the legend. This setting adjusts the horizontal gap for a horizontal layout and the vertical gap for a vertical layout.

    • Icon Width: Click + or -, or enter a value to adjust the width of the legend markers.

    • Icon Height: Click + or -, or enter a value to adjust the height of the legend markers.

    • Selection Mode: Click the Eye icon on the right to enter selection mode.

    • Inactive Color: The legend color when inactive, visible only after clicking a legend item on the preview or published page. Color picker.

    • Text Style

      • Color: The legend text color. Color picker.

      • Font Style: The font style of the legend text.

      • Font Weight: The font weight of the legend text.

      • Font: The font family of the legend text.

      • Font Size: Click + or -, or enter a value to change the font size of the legend.

    • Background Color: The legend background color. Color picker.

    • Border Color: The legend border color. Color picker.

    • Border Width: Click + or -, or enter a value to adjust the border width of the legend.

  • Grid: Click the Eye icon on the right to switch to the grid view.

    • Left: The distance between the grid and the left border of the widget. The default value is 3%. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Top: The distance between the grid and the top border of the widget. The default value is 60. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Right: The distance between the grid and the right border of the widget. The default value is 4%. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Bottom: The distance between the grid and the bottom border of the widget. The default value is 3%. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Width: The width of the grid. The default value is auto, which automatically adjusts the width.

    • Height: The height of the grid. The default value is auto, which automatically adjusts the height.

    • Responsive Layout: If you select this checkbox, the chart uses a responsive layout. If you clear this checkbox, the chart uses the layout that you configure.

    • Background Color: The grid background color. Default: transparent. Color picker.

    • Border Color: The grid border color. Default: transparent. Color picker.

    • Border Width: Click + or -, or enter a value to adjust the border width of the grid.

  • x-axis: Click the eye icon on the right to show the x-axis styles.

    • Offset: The offset of the x-axis from its default position. The default value is 0.

    • Name: A custom name for the x-axis.

    • Name Location: The position of the x-axis name. Options include Start, Center, and End. The default value is End.

    • Name Style

      • Color: The x-axis name text color. Color picker.

      • Font Style: The font style of the x-axis name.

      • Font Weight: The font weight of the x-axis name.

      • Font: The font family of the x-axis name.

      • Font Size: Click + or -, or enter a value to change the font size of the x-axis name.

    • Name Gap: Click + or -, or enter a value to adjust the distance between the axis name and the axis line.

    • Name Rotate: Click + or -, or enter a value to adjust the rotation angle of the axis name.

    • Inverse: If you select this checkbox, the axis is inverted. If you clear this checkbox, the axis is displayed normally.

    • Boundary Gap: If you select this checkbox, a gap is left on both sides of the axis. If you clear this checkbox, no gap is left.

    • Min: The minimum value of the axis. The default value is dataMin, which uses the minimum value of the data on this axis. If you do not set this parameter, the minimum value is automatically calculated to ensure that the axis ticks are evenly distributed.

    • Max: The maximum value of the axis. The default value is dataMax, which uses the maximum value of the data on this axis. If you do not set this parameter, the maximum value is automatically calculated to ensure that the axis ticks are evenly distributed.

    • Scale: If you select this checkbox, the axis scale does not need to include the zero tick. This parameter is valid only for value axes and is ignored if you set the Min and Max parameters.

    • Static: If you select this checkbox, the axis is static and cannot be interacted with.

    • Axis Line: Click the eye icon on the right to show the x-axis line.

      • On Zero: Specifies whether the x-axis or y-axis line is displayed on the zero tick of the other axis. This is valid only when the other axis is a value axis and includes the zero tick.

      • Line Style

        • Color: The x-axis line color. Color picker.

        • Width: Click + or -, or enter a value to change the width of the x-axis line.

        • Type: The type of the axis line. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the x-axis line. The value must be in the range of [0,1].

    • Scale: Click the Eye icon on the right to display the x-axis scale.

      • Align with Label: If you select this checkbox, the axis ticks are aligned with the labels. This is valid for a category axis only after you select the Boundary Gap checkbox.

      • Interval: Click + or -, or enter a value to adjust the display interval of the axis ticks. This parameter is valid for category axes.

      • Inside: If you select this checkbox, the axis ticks face inward. If you clear this checkbox, they face outward.

      • Length: Click + or -, or enter a value to adjust the length of the axis ticks.

      • Axis Line Style

        • Color: The tick mark color. Fill style: Color Fill or Gradient Fill. Color picker.

        • Width: Click + or -, or enter a value to change the width of the tick marks.

        • Type: The type of the axis line. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the tick marks. The value must be in the range of [0,1].

    • Tick Label: Click the Eye icon to show the tick labels on the x-axis.

      • Interval: The interval between displayed labels on a category axis. By default, the interval is automatically adjusted to prevent labels from overlapping. You can set this parameter to 0 to force all labels to be displayed. If you set this parameter to 1, every other label is displayed. If you set it to 2, every third label is displayed, and so on.

      • Inside: If you select this checkbox, the axis labels face inward. If you clear this checkbox, they face outward.

      • Rotate: The rotation angle of the labels, from -90 to 90 degrees. You can rotate labels to prevent them from overlapping on a category axis.

      • Margin: The distance between the labels and the axis line.

      • Show Min Label: If you select this checkbox, the minimum label is always displayed. By default, this is determined automatically. The minimum label is not displayed if it overlaps with other labels.

      • Show Max Label: If you select this checkbox, the maximum label is always displayed. By default, this is determined automatically. The maximum label is not displayed if it overlaps with other labels.

      • Text Style

        • Color: The axis label color. Color picker.

        • Font Style: The font style of the axis label text.

        • Font Weight: The font weight of the axis label text.

        • Font: The font family of the axis label text.

        • Font Size: The font size of the axis label text.

        • Align: The horizontal alignment of the axis label text. Options include Left, Center, and Right.

        • Vertical Align: The vertical alignment. Options include Top, Center, and Bottom.

    • Split Line: Click the eye icon on the right to show the split lines.

      • Interval: You can click + or -, or enter a value to adjust the display interval of the split lines. This parameter applies only to category axes. By default, split lines are displayed at an interval that prevents them from overlapping. You can set this to 0 to force all split lines to be displayed. For example, a value of 1 means that every other split line is displayed, and a value of 2 means that every third split line is displayed, and so on.

      • Axis Line Style

        • Width: Click + or -, or enter a value to change the width of the x-axis split lines.

        • Type: The type of the axis line. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the x-axis split lines. The value must be in the range of [0,1].

    • Split Area: Click the Eye icon on the right to display the area.

      • Interval: Click + or -, or enter a value to set the display interval of the split areas. This parameter applies only to category axes. By default, the interval is set to prevent split areas from overlapping. If you set this parameter to 0, all split areas are displayed. If you set this parameter to 1, one of every two split areas is displayed. If you set this parameter to 2, one of every three split areas is displayed, and so on.

      • Area Style

        • Opacity: Click + or -, or enter a value to adjust the opacity of the split areas. The value must be in the range of [0,1].

    • Axis Pointer: Click the eye icon on the right to show the axis pointer.

      • Type: The type of pointer. Options include Line and Shadow.

      • Snap: If you select this checkbox, the pointer automatically snaps to points. This feature is useful for value axes and time axes to automatically find small data points.

      • Value: The initial position of the pointer. The default value is 0.

      • Status: The current status of the pointer. Select the checkbox to show the pointer. Clear the checkbox to hide it.

      • Label: Click the Eye icon on the right to display the coordinate axis label.

        • Precision: The decimal precision of the value in the label. By default, the precision is determined automatically based on the axis value. You can also specify an integer, such as 2, to reserve two decimal places.

        • Margin: If you select this checkbox, a margin is added between the pointer label and the axis. If you clear this checkbox, no margin is added.

        • Text Style

          • Color: The axis pointer label text color. Color picker.

          • Font Style: The font style of the axis pointer label text.

          • Font Weight: The font weight of the axis pointer label text.

          • Font: The font family of the axis pointer label text.

          • Font Size: The font size of the axis pointer label text.

        • Background Color: The background color of the pointer's text label.

        • Border Color: The border color of the pointer's text label.

        • Border Width: The border width of the pointer's text label.

      • Line Style

        • Color: The axis line color. Color picker.

        • Width: Click + or -, or enter a value to change the width of the axis line.

        • Type: The type of the axis line. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the axis line. The value must be in the range of [0,1].

      • Drag Handle: Click the Eye icon on the right to display it.

        • Size: Click + or -, or enter a value to adjust the size of the handle.

        • Margin: Click + or -, or enter a value to adjust the distance between the center of the handle and the axis.

        • Color: The color of the handle.

        • Throttle: The update frequency when the handle is dragged, in milliseconds. A larger value can improve performance but may degrade the user experience.

  • y-axis: Configured the same way as the x-axis.

  • Data Zoom: Click the eye icon on the right to show the data zoom controls.

    • Start: The starting percentage of the data window for the candlestick chart.

    • End: The ending percentage of the data window for the candlestick chart.

    • Left: The distance between the data zoom control and the left border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Top: The distance between the data zoom control and the top border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Right: The distance between the data zoom control and the right border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Bottom: The distance between the data zoom control and the bottom border of the widget. The default value is auto. The following input formats are supported:

      • A specific pixel value, such as 20.

      • A percentage of the container's width or height, such as 20%.

      • left, center, or right. The widget automatically aligns to the specified position.

    • Orientation: From the drop-down list, you can select the layout orientation of the data zoom control. Options include Horizontal and Vertical.

    • Scaling Lock: Click the Eye icon to lock scaling.

    • Text Style

      • Color: The text color. Color picker.

      • Font Style: The font style of the text.

      • Font Weight: The font weight of the text.

      • Font: The font family of the text.

      • Font Size: Click + or -, or enter a value to change the font size.

    • Data Background Style

      • Line Style

        • Color: The line color. Color picker.

        • Width: Click + or -, or enter a value to change the width of the line.

        • Type: The type of the line. Options include Solid and Dashed.

      • Area Style

    • Handle Icon (SVG Path): The SVG path of the handle icon in the project.

    • Handle Size: The size of the handle icon in the data zoom view.

    • Handle Style

      • Color: The handle background color. Color picker.

      • Border Color: The handle border color. Color picker.

      • Border Width: Click + or -, or enter a value to adjust the border width of the handle element.

      • Border Style: The border stroke type. Options include Solid and Dashed.

      • Opacity: Click + or -, or enter a value to adjust the opacity of the handle element. The value must be in the range of [0,1].

  • Tooltip: Click the eye icon on the right to show the tooltip.

    • Trigger: The trigger type. Options include Mouse move, Mouse click, and Mouse move and click.

    • Background Color: The tooltip background color. Color picker.

    • Border Color: The tooltip border color. Color picker.

    • Border Width: Click + or -, or enter a value to adjust the border width of the background box.

    • Padding: Click + or -, or enter a value to adjust the padding of the background box. The unit is px. The default padding for all sides is 5.

    • Text Style

      • Color: The tooltip text color. Color picker.

      • Font Style: The font style of the tooltip text.

      • Font Weight: The font weight of the tooltip text.

      • Font: The font family of the tooltip text.

      • Font Size: The font size of the tooltip text.

  • Series: Click the image icon to add a series or the image icon to delete a series. You can click the image or image icon to arrange multiple series. You can click the image icon to copy the configuration of the selected series and add a new series with the same configuration.

    • Name: A custom name for the series. This must be used with the value of the s field in the data.

    • Type: The type of the candlestick chart. Options include Candlestick and Line.

    • Symbol: A custom symbol for the markers. The default value is emptyCircle. Symbol types include emptyCircle, rect, roundRect, triangle, diamond, pin, arrow, and none. You can also set this to an image URL or path. See the ECharts official documentation.

    • Symbol Size: Click + or -, or enter a value to change the size of the symbols.

    • Symbol Rotate: Click + or -, or enter a value to change the rotation angle of the symbols.

    • Show Symbol: Shows or hides the symbols.

    • Hover Animation: If you select this checkbox, an animation effect is enabled when you move the mouse pointer over the chart.

    • Legend Hover Link: If you select this checkbox, the legend hover link is enabled.

    • Stack: Stacks the data. Series on the same category axis are stacked if they have the same stack value.

    • Connect Empty Data: When checked, you can use empty data to generate a sample k-line chart.

    • Clip: If you select this checkbox, parts of the chart that are outside the window are clipped.

    • Step: Specifies whether to display a step line chart. You can set this to true to display a step line chart. You can also set it to start, middle, or end to specify that the inflection point is at the current point, the midpoint between the current and next points, or the next point, respectively.

    • Label

      • Normal: Click the eye icon on the right to show the labels for normal items (items that do not respond to mouse events).

        • Position: The position of the label relative to the candlestick chart item. Options include but are not limited to top, left, and inside.

        • Text Style

          • Color: The normal item label text color. Color picker.

          • Font Style: The font style of the normal item label text.

          • Font Weight: The font weight of the normal item label text.

          • Font: The font family of the normal item label text.

          • Font Size: The font size of the normal item label text.

      • Emphasis: Click the eye icon on the right to show the labels for emphasized items (items that respond to mouse events).

        • Position: The position of the label relative to the candlestick chart item. Options include but are not limited to top, left, and inside.

        • Text Style

          • Color: The emphasized item label text color. Color picker.

          • Font Style: The font style of the emphasized item label text.

          • Font Weight: The font weight of the emphasized item label text.

          • Font: The font family of the emphasized item label text.

          • Font Size: The font size of the emphasized item label text.

    • Item Style

      • Normal

        • Color: The price increase color for normal items. Color picker.

        • Border Color: The price increase border color for normal items. Color picker.

        • Fall Color: Use the color picker to set the color for normal item elements.

        • Border Color0: The price decrease border color for normal items. Color picker.

        • Border Width: Click + or -, or enter a value to adjust the border width of normal items.

        • Border Style: The border stroke type. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of normal items. The value must be in the range of [0,1].

      • Highlights

        • Color: The emphasized item background color. Color picker.

        • Border Color: The emphasized item border color. Color picker.

        • Border Width: Click + or -, or enter a value to adjust the border width of emphasized items.

        • Border Style: The border stroke type. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of normal items. The value must be in the range of [0,1].

    • Line Style

      • Normal

        • Color: The axis line color. Fill style: Color Fill or Gradient Fill. Color picker.

        • Width: Click + or -, or enter a value to change the width of the axis line.

        • Type: The stroke type of the axis line. Options include Solid and Dashed.

        • Opacity: Click + or -, or enter a value to adjust the opacity of the axis line. The value must be in the range of [0,1].

    • Smooth Curve: Click the Eye icon on the right to toggle the smoothing of the curve.

    • Smooth Monotone: Sets the smoothing method for the line chart.

    • Downsample: The downsampling strategy for a line chart when the data volume is much larger than the number of pixels. Options include but are not limited to max, min, and average.

    • Silent: If you select this checkbox, the series does not respond to or trigger mouse events.

  • Animation: If you select this checkbox, animation effects are enabled.

Data Source panel

Field

Description

x

Configures the x-axis category value.

open

The opening price.

close

The closing price.

lowest

The day low.

highest

The day high.

Data Item Configuration

Description

Data Source

The component's data source displays the data fields contained within the component using code editing or visual editor. You can also modify the data type to flexibly configure the component's data.

Data Mapping

When you need to customize chart field configurations, you can set different field mappings in the Data Mapping module to map these fields to the corresponding fields of the component. This allows for real-time data matching without altering the data source fields. Additionally, click the image icon to configure field styles individually.

Filter

Open the Filter to select an existing data filter or create a new one, and configure the data filter script to achieve data filtering capabilities. For more information, see manage data filters.

Data Response Result

This feature displays the component's data in real-time. When the component's data source changes, the data response result will display the latest data accordingly. In case of a delayed system response, you can click the image icon on the right to check the current data response result, or click the image icon on the right to obtain the most recent data for the component. You can also click to view examples to see sample response results for the current component.

Disable Loading State

Check the check box to hide the loading content during component updates and data dashboard previews. Unchecking will display the loading content. The default setting is unchecked.

Controlled Mode

Check the check box to prevent data requests upon the component's initialization. Data requests will only be initiated through global variables or methods configured in the blueprint editor. Unchecking allows for automatic update requests. The default setting is unchecked.

Automatic Update Request

Check the check box to manually set the polling frequency for dynamic polling. Clearing this option disables automatic updates, requiring manual page refreshes or data request triggers through the blueprint editor and global variable events for updates.

Advanced panelimage.png

Interaction

Description

When a data item is clicked

Turn on the switch to enable widget interaction. When a data item is clicked, fields such as x, type, and value are returned by default. Configure widget interactions.

When a legend item is clicked

Turn on the switch to enable widget interaction. When a legend item is clicked, the selected field is returned by default. Configure widget interactions.

Blueprint interaction

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

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

  3. View the blueprint configuration parameters.image.png

    • Events

      Event

      Description

      When the data API request is complete

      The event triggered after the data API request is returned and processed by the filter. The processed JSON data is also returned. See the Data Response section on the Data Source tab for a data example.

      When a data item is clicked

      The event triggered when you click a data item in the candlestick chart. The corresponding data item is also returned.

      When a legend item is clicked

      The event triggered when you click a legend item in the candlestick chart. The corresponding data item is also returned.

    • Actions

      Action

      Description

      Request Data API

      Re-requests data from the server. Data from upstream data processing nodes or layer nodes is used as a parameter. For example, if the API data source is https://api.test and the data passed to the Request Data API action is { id: '1'}, the final request URL is https://api.test?id=1.

      Import Data API

      Imports pre-processed data in the widget's drawing format and redraws the widget without requesting server data again. See the Data Response Result area on the Data Source tab for data examples.

      Show Tooltip

      The data passed to the action is an object. Parameters include dataindex (data index), name (data name), x (x-coordinate), and y (y-coordinate). For a data example, see the following code:

      { 
    "dataIndex": 1,  
    "name": "",  
    "x": 1,  
    "y": 1
}

      Hide Tooltip

      Hides the tooltip. No parameters are required.

      Legend Control

      The data passed to the action is an object. Parameters include type (legend action type) and name (legend name). For a data example, see the following code:

      {
  "type": "",// Legend action types include the following: legendSelect, legendUnSelect, legendToggleSelect
  "name": ""
}

      Move

      Moves the widget to a specified position. For a data example, see the following code:

       {      
      // Movement method. Absolute positioning: to. Relative positioning: by. Default value: to.
        "positionType": "to",
      // The specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // The animation method.
      "animation": {
        "enable": false,
        // The animation delay.
        "animationDuration": 1000,
        // The animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

      Toggle Visibility

      Toggles the visibility of the widget. No parameters are required.

      Show

      Displays a component with sample reference data.

      {
  "animationType": "",// The animation method. Optional value: fade. If left empty, there is no animation.
  "animationDuration": 1000,// The animation delay, in ms.
  "animationEasing": ""// The animation curve.
}

      Hide

      Hides the component. For an example, see the reference data.

      {
  "animationType": "",// The animation method. Optional value: fade. If left empty, there is no animation.
  "animationDuration": 1000,// The animation delay, in ms.
  "animationEasing": ""// The animation curve.
}

      Update Widget Configuration

      Dynamically updates the widget style configuration. Go to the widget's Style panel and click Copy Configuration to Clipboard to get the configuration data. Then modify the field values in the data processing node on the Blueprint Editor page.
Previous：Echarts stepped line chartNext：ECharts stacked bar chart