DocsICP FilingConsole
官方文档
首页

Echarts Stacked Line Chart

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

Configure the style and data source of ECharts stacked line charts in DataV.

Chart styleimage.png

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 widget, in pixels. Click the Proportional resizing icon to lock the aspect ratio. Click it again to unlock.

  • Position: the pixel X and Y coordinates of the widget. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotation Angle: the rotation angle of the widget around its center point, in degrees (°). You can control the rotation angle by using one of the following methods:

    • 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.

    • Drag the black dot in the Rotation control icon icon.

    • Click the Horizontal flip icon to horizontally flip a widget.

    • Click the Vertical flip icon to vertically flip a widget.

  • Opacity: the opacity of the widget. Valid values: 0 and 1. A value of 0 hides the widget. A value of 1 makes it fully visible. Default value: 1.

  • Rendering Engine: Choose between canvas and svg to set the rendering engine for the line chart.

  • Legend: Click the image.png icon to customize the legend style.

    • Horizontal Position: Select the alignment of legend markers and text from the dropdown list.

      • Auto: The default Auto setting is determined by the widget's position and orientation.

      • Align Left: When the graphic is on the left side of the text, it is Align Left.

      • Align Center: Use Align Center when the legend graphic overlaps with the text.

      • Align Right: This option is used when you want the graphic to appear on the right side of the text, ensuring it is aligned to the right.

    • Vertical Position: Select the vertical alignment of legend markers and text from the dropdown list.

      • Auto: The default Auto setting is determined by the widget's position and orientation.

      • Align Top: The graphic aligns with the top of the window when the Align Top option is selected.

      • Align Center: The graphic is considered Align Center when it is positioned at the center of the window.

      • Align Bottom: When the graphic is below the window, it is Align Bottom.

    • Orientation: Select the layout orientation of the legend from the dropdown list.

      • Horizontal: Arranges the legend horizontally.

      • Vertical: Arranges the legend vertically.

    • Padding: Adjust the legend padding by clicking the + or - sign, or by entering a value manually. The unit is pixels, with a default padding of 5 in all directions.

    • Element Spacing: Adjust the distance between each item of the legend by clicking the + or - sign, or by entering a value manually. The spacing is horizontal in a horizontal layout and vertical in a vertical layout.

    • Text Style

      • Color: Modify the color of the legend text using the 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: Change the font size of the legend by clicking the + or - sign, or by entering a value manually.

  • Grid: Click the 箭头 icon to customize the grid style.

    • Left Margin: Adjust the left margin of the grid by clicking + or -, or by entering a value manually, in pixels.

    • Top Margin: Adjust the top margin of the grid by clicking + or -, or by entering a value manually, in pixels.

    • Right Margin: Adjust the right margin of the grid by clicking + or -, or by entering a value manually, in pixels.

    • Bottom Margin: Adjust the bottom margin of the grid by clicking + or -, or by entering a value manually, in pixels.

  • X-axis: Click the image.png icon to customize the x-axis style.

    • Position: Set the position of the x-axis within the window.

      • Bottom: Position the x-axis at the bottom of the window.

      • Top: Position the x-axis at the top of the window.

    • Name: Customize the name of the x-axis.

    • Name Position: Set the position of the x-axis name, with options such as Start, End, or Center. The default is End.

    • Name Style

      • Color: Use the color picker to change the color of the x-axis name text.

      • Font Style: Choose the font style for the x-axis name.

      • Font Weight: Select the font weight for the x-axis name.

      • Font: Choose the font family for the x-axis name.

      • Font Size: Modify the font size of the x-axis name by clicking + or -, or by entering a value manually.

    • Name Interval: Adjust the distance between the axis name and the axis line by clicking + or -, or by entering a value manually.

    • Name Rotation: Modify the rotation angle of the axis name by clicking + or -, or by entering a value manually.

    • Reverse: Toggle to display the axis in reverse order or in normal order.

    • Whitespace: Toggle to include or exclude whitespace on both sides of the axis.

    • Static: Toggle to make the axis static and non-interactive.

    • Axis Line: Click the image.png icon to customize the x-axis line.

      • On Zero: Specify whether the axis line of the x-axis or y-axis is aligned with the 0 scale of another axis. This setting is only effective when the other axis is a value axis and contains a 0 scale.

      • Line Style

        • Color: Use the color picker to change the color of the x-axis line.

        • Width: Adjust the width of the x-axis line by clicking + or -, or by entering a value manually.

        • Type: Choose the type of the axis line, with options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Adjust the transparency of the x-axis line by clicking + or -, or by entering a value manually. The range is from 0 to 1.

    • Tick Line: Click the image.png icon to customize the x-axis ticks.

      • Align With Label: Ensure that the tick line aligns with the label when whitespace is enabled.

      • Inside: Toggle to make the axis tick point inward oroutward.

      • Length: Modify the length of the axis tick by clicking + or -, or by entering a value manually.

      • Line Style

        • Color: Change the color of the tick line using the color picker.

        • Width: Adjust the width of the tick line by clicking + or -, or by entering a value manually.

        • Type: Select the type of the tick line, with options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Adjust the transparency of the tick line by clicking + or -, or by entering a value manually. The range is from 0 to 1.

    • Tick Label: Click the image.png icon to customize the x-axis tick labels.

      • Interval: Set the display interval for the axis tick labels, effective on category axes. By default, labels are displayed at intervals to prevent overlap. You can set it to 0 to display all labels. If set to 1, it means Display One Label Every Other Label. If the value is 2, it means Display One Label Every Two Labels, and so on.

      • Inside: Toggle to position the axis tick label inward or outward.

      • Rotation: Set the rotation angle for the tick label to prevent overlap between labels when they cannot be fully displayed on the category axis. The rotation angle ranges from -90 to 90 degrees.

      • Outer Margin: Adjust the distance between the tick label and the axis line.

      • Formatter: Choose the format for the tick label, including options such as Integer, 1 Decimal Place, and 2 Decimal Places. The default is Integer.

      • Show Minimum Label: Toggle to display the minimum tick label. By default, this is determined automatically. If labels overlap, the minimum tick label will not be displayed.

      • Show Maximum Label: Toggle to display the maximum tick label. By default, this is determined automatically. If labels overlap, the maximum tick label will not be displayed.

      • Color: Use the color picker to change the color of the axis tick labels.

      • Font Style: Select the font style for the axis tick label text.

      • Font Weight: Choose the font weight for the axis tick label text.

      • Font: Select the font family for the axis tick label text.

      • Font Size: This refers to the size of the text for the axis tick labels.

    • Line Separator: Click the image.png icon to customize the line separator.

      • Line Style

        • Color: Use the color picker to change the color of the line separator.

        • Width: Adjust the width of the line separator by clicking + or -, or by entering a value manually.

        • Type: Select the type of the line separator, with options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Adjust the transparency of the line separator by clicking + or -, or by entering a value manually. The range is from 0 to 1.

  • Y-axis: Refer to the X-axis style for configuration details.

  • Tooltip: Click the icon on the right image.png to customize the tooltip.

    • Trigger Type: Customize the trigger type for the tooltip, with Axis as the default option.

      • Data Item: Triggers on data item graphics, mainly used in scatter charts, pie charts, and other charts without category axes.

      • Axis: Triggers on axis, mainly used in column charts, line charts, and other charts with category axes.

      • No Trigger: No trigger is set.

    • Axis Pointer: Click the icon on the right image.png to customize the axis pointer.

      • Type: Select the type of pointer, with options such as Line Pointer, Shade Pointer, and Cross Pointer.

      • Auto Snap: Enable to automatically align the axis pointer to the nearest data point. This is particularly useful on value axes and timelines to highlight small value points.

      • Pointer Line Style

        • Color: Change the color of the pointer line using the color picker.

        • Width: Adjust the width of the pointer line by clicking the + or - sign, or by entering a value manually.

        • Type: Choose the type of the pointer line from options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Modify the transparency of the pointer line by clicking the + or - sign, or by entering a value manually. The range is [0,1].

      • Pointer Shade Style

        • Color: Change the color of the pointer shade using the color picker.

        • Transparency: Adjust the transparency of the pointer shade by clicking the + or - sign, or by entering a value manually. The range is [0,1].

      • Pointer Cross Style

        • Color: Use the color picker to modify the color of the pointer cross.

        • Width: Adjust the width of the pointer cross by clicking the + or - sign, or by entering a value manually.

        • Type: Select the type of the pointer cross from options such as Solid Line, Dashed Line, and Dotted Line.

        • Transparency: Modify the transparency of the pointer cross by clicking the + or - sign, or by entering a value manually. The range is [0,1].

      • Background Color: Set the background color for the tooltip text label.

      • Text Style

        • Color: Change the color of the tooltip label text using the color picker.

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

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

        • Font: The font family for the tooltip label text.

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

  • Edition: Click the image or image icon to add or remove a conditional style. Click image or image to configure the arrangement of multiple conditional styles. Click image to copy the currently selected conditional style and add a new one with the same configuration.

    • Name: Customize the name of the edition, which should be used in conjunction with the s field value in the data.

    • Mark Graphic: Customize the mark graphic with options such as Circle, None, Circle, Rectangle, Rounded Rectangle, Triangle, Diamond, Pin, and Arrow. For more details, see the ECharts official website.

    • Mark Size: Adjust the size of the mark by clicking + or -, or by entering a value manually, in pixels.

    • Mark Rotation Angle: Modify the rotation angle of the mark by clicking + or -, or by entering a value manually, in degrees.

    • Display Icon: Click the image.png icon to customize the icon style.

    • Hover Animation: Enable the animation effect when hovering over the chart.

    • Legend Filter Interaction Highlight: Activate the filter interaction highlight when hovering over a legend item.

    • Stacked Chart: Enable data stacking. Data with the same stack value on the same category axis will be stacked together, such as total amounts.

    • Step Line Chart: Set the step style for the line chart, with options like Off, Current Point Turn, Midpoint Turn, and Next Point Turn.

    • Tag: Click the image.png icon to customize the tag style.

      • Position: Set the position of the tag relative to the line chart, with options like top, left, and inside.

      • Positioning Distance: Set the distance of the tag from the top border line of the line chart.

      • Rotation: Set the rotation angle for the tag to prevent overlap between tags when they cannot be fully displayed on the category axis. The rotation angle ranges from -90 to 90 degrees.

      • Color: Use the color picker to change the color of the tag text.

      • Font Style: Choose the font style for the tag text.

      • Font Weight: Select the font weight for the tag text.

      • Font: Choose the font family for the tag text.

      • Font Size: Specifies the size of the tag text.

    • Element Style

      • Color: Use the color picker to change the color of the element style.

      • Transparency: Adjust the transparency of the element style by clicking + or -, or by entering a value manually. The range is from 0 to 1.

    • Line Style

      • Color: Use the color picker to change the color of the line.

      • Width: Adjust the width of the line by clicking + or -, or by entering a value manually.

      • Type: Choose the type of the line, with options such as Solid Line, Dashed Line, and Dotted Line.

      • Transparency: Adjust the transparency of the line by clicking + or -, or by entering a value manually. The range is from 0 to 1.

    • Area Style

      • Color: Use the color picker to change the color of the area style.

      • Transparency: Adjust the transparency of the area style by clicking + or -, or by entering a value manually. The range is from 0 to 1.

    • Smooth Curve: Adjust the smoothness of the line by clicking + or -, or by entering a value manually, as a percentage. The range is from 0 to 1.

  • Animation: Enable the animation effect for the chart.

  • Animation Duration: Modify the duration of the initial animation by clicking + or -, or by entering a value manually, in milliseconds.

  • Easing Effect: Select the easing effect for the data update animation from the dropdown box. The default is cubicOut.

Data source panelimage.png

Field

Description

x

The x-axis category value for each data point.

y

The numeric value for each data point in the line chart.

s

(Optional) Edition value, used in conjunction with the Edition configuration item in the style panel.

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 Clicking On A Data Item

Turn on the switch to enable component interaction. When a data item is clicked, the component throws a callback value. By default, the x, y, and s fields are returned. For details, see component interaction configuration.

When Clicking On A Legend

Turn on the switch to enable component interaction. When a legend is clicked, the component throws a callback value. By default, the selected field is returned. For details, see component interaction configuration.

Blueprint interaction

  1. Enter the Blueprint page by clicking the image icon in the upper left corner of the page.

  2. Add the current component to the main canvas under the Layer Node tab.

  3. Review the blueprint configuration parameters. image.png

    • Event

      Event

      Description

      When The Data Interface Request Is Completed

      Triggered after the data interface request completes and the response is processed by the filter. Returns the processed JSON data. For data examples, see the Data Source tab in the configuration panel on the right side of the component in the canvas editor, under the Data Response Result section.

      When Clicking On A Data Item

      Triggered when a data item in the stacked line chart is clicked. Returns the corresponding data item.

      When Clicking On A Legend

      Triggered when a legend in the stacked line chart is clicked. Returns the corresponding data item.

    • Action

      Action

      Description

      Request Data Interface

      Re-requests data from the server. Data passed from the upstream processing node or layer node is appended as query parameters. For example, if the data source URL is https://api.test and the input data is { id: '1'}, the actual request becomes https://api.test?id=1.

      Import Data Interface

      Imports pre-processed data directly into the component for rendering, without re-requesting data from the server. For data examples, see the Data Source tab in the configuration panel on the right side of the component in the canvas editor, under the Data Response Result section.

      Highlight

      The action input data is of object type, with parameters including seriesName (edition name), seriesIndex (edition index), dataIndex (data index), and name (data name). Specify the edition through seriesName or seriesIndex. If you want to specify a specific data, you can further specify dataIndex or name. Reference data example

      {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

      Cancel Highlight

      The action input data is of object type, with parameters including seriesName (edition name), seriesIndex (edition index), dataIndex (data index), and name (data name). Specify the edition through seriesName or seriesIndex. If you want to specify a specific data, you can further specify dataIndex or name. Reference data example

      {  
    "seriesName": "",  
    "seriesIndex": 1,  
    "dataIndex": 1,  
    "name": ""
}

      Show Tooltip

      The action input data is of object type, with parameters including dataindex (data index), name (data name), x (x-coordinate position), and y (y-coordinate position). Reference data example

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

      Hide Tooltip

      Hide the tooltip. No parameters are needed.

      Legend Control

      The action input data is of object type, with parameters including type (legend action type) and name (legend name). Reference data example

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

      Shift

      Move the component to the specified position. Reference data example.

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

      Switch Visibility

      Toggle the component's visibility. No parameters are needed.

      Show

      Display the component. Reference data example.

      {
  "animationType": "",//Animation method. Optional value: fade. No animation if not filled.
  "animationDuration": 1000,//Animation delay, in ms.
  "animationEasing": ""//Animation curve
}

      Hide

      Conceal the component. Reference data example.

      {
  "animationType": "",//Animation method. Optional value: fade. No animation if not filled.
  "animationDuration": 1000,//Animation delay, in ms.
  "animationEasing": ""//Animation curve
}

      Update Component Configuration

      Dynamically updates the component style. Click Copy Configuration To Clipboard in the component's Style panel to obtain the configuration data, then modify the field values as needed in the data processing node on the blueprint editor.
Previous：Echarts Continuous Line ChartNext：ECharts 24-hour line chart