edit-icon download-icon

More widgets

Last Updated: Jul 10, 2018

You can add more data charts by using the more widgets function.

Procedure

  1. Log on to the DataV console.

  2. Select Projects > Create Project.

  3. Select a project template from the list on the left side, for example, the Blank Canvas template.

  4. Click Create.

  5. Enter a project name, and then click Create.

    After a project is created, you can edit the project.

  6. Select More > ECharts to open the ECharts widget list.

  7. Click a widget to add a widget to the canvas.

The following example uses a Rose Graph.

Click Rose Graph. The Style and Data tabs automatically appear on the right side of the page.

ECharts Polar Chart

Grid

You can adjust the position and color of the parent widget by using the Grid function.

MapStyle

  • Deselect the Grid check box to hide the Grid function or enter numbers to adjust the position of the grid.

  • Contain Label: Deselect the check box to hide the Contain Label function.

  • Background Color: Click the color block to change the background color of the widget.

  • Border Color: Click the color block to change the border color of the widget.

  • Border Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the border width.

Visual map

You can adjust the visual color difference by using the Visual Map function.

visual map

  • Min/Max values: Enter the numbers to adjust the visual mapping of the widget.

Tooltip

You can adjust the display style of the prompt box by using the Tooltip function.

tooltip

  • Title: Enter the title of the prompt box.

    Axis Pointer

  • Axis Pointer: Enter the name of the coordinates.

  • Snap: Deselect the check box to hide the Snap function.

  • Label: Deselect the check box to hide the Label function.

  • Precision: Click the plus (+) or minus (-) sign, or enter a number to adjust the decimal precision.

  • Margin: Deselect the check box to hide the Margin function.

    Text color

  • Color: Click the color block to change the text color of the widget.

  • Font Style: Enter a parameter to change the font style of the widget.

  • Font Weight: Enter a parameter to change the font width of the widget.

  • Font Family: Enter a parameter to change the font of the widget.

  • Font Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the font size of the widget.

  • Background Color: Click the drop-down arrow to see more options and select a background color. Click the color block to change the background color of the widget.

  • Border Color: Click the drop-down arrow to see more options and select a border color. Click the color block to change the border color of the widget.

  • Border Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the border width of the widget.

    axis

  • Color: Click the drop-down arrow to see more options and select an axis color. Click the color block to change the axis color.

  • Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the axis width of the widget.

  • Type: Enter a parameter to adjust the axis type.

  • Opacity: Click the plus (+) or minus (-) sign, or enter a number to adjust the axis opacity of the widget.

    show content

  • Show Content: Deselect the check box to hide the Show Content function.

  • Trigger On: Enter a parameter to set the trigger condition.

  • Background Color: Click the drop-down arrow to see more options and select a color for the prompt box. Click the color block to change the color of the prompt box.

  • Border Color: Click the drop-down arrow to see more options and select a color for the prompt box. Click the color block to change the border color.

  • Border Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the border width of the prompt box.

  • Padding: Click the plus (+) or minus (-) sign, or enter a number to adjust the padding of the prompt box.

    text style

  • Color: Click the color block to change the text color of the prompt box.

  • Font Style: Enter a parameter to change the font style of the prompt box.

  • Font Weight: Enter a parameter to change the font width of the prompt box.

  • Font Family: Enter a parameter to change the font of the prompt box.

  • Font Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the font size of the prompt box.

Series

You can adjust the overall style of the widget by using the Series function.

Series

  • Legend Hover Link: Deselect the check box to hide this function.

  • Hover Animation: Deselect the check box to hide this function.

  • Selected Mode: Deselect the check box to hide the selected mode.

  • Selected Offset: Click the plus (+) or minus (-) sign, or enter a number to adjust the position of the selected item.

  • Clockwise: Deselect the check box to hide the Clockwise function.

  • Start Angle: Click the plus (+) or minus (-) sign, or enter a number to adjust the start angle of the image.

  • Min Angle: Click the plus (+) or minus (-) sign, or enter a number to adjust the minimum angle of the image.

  • Nightingale Rose Chart: Deselect the check box to hide the Nightingale Rose style.

  • Avoid Label Overlap: Deselect the check box to hide this function.

  • Still Show Zero Sum: Deselect the check box to hide the Show Zero Sum function.

  • Static: Deselect the check box to hide the Static function.

    Label

  • Normal: Deselect the check box to hide the general items.

  • Color: Click the color block to change the text color of the tab.

  • Font Style: Enter a parameter to adjust the font style of the tab.

  • Font Weight: Enter a parameter to adjust the font width of the tab.

  • Font Family: Enter a parameter to adjust the tab font.

  • Font Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the font size of the tab.

    Emphasis

  • Emphasis: Deselect the check box to hide key items.

  • Color: Click the color block to change the font color of the key item.

  • Font Style: Enter a parameter to adjust the font style of the key item.

  • Font Weight: Enter a parameter to adjust the font width of the key item.

  • Font Family: Enter a parameter to adjust the font of the key item.

  • Font Size: Click the plus (+) or minus (-) sign, or enter a number to adjust the font size of the key item.

    Line Label

  • Normal: Deselect the check box to hide the general items.

  • Length: Click the plus (+) or minus (-) sign, or enter a number to adjust the length of the tab guide line.

  • Length 2: Click the plus (+) or minus (-) sign, or enter a number to adjust the length of Segment II of the tab guide line.

  • Smooth: Drag the slider or enter a number to adjust the smoothness of the tab guide line.

    Line Style

  • Color: Click the drop-down arrow to see more options and select a color of the tab guide line. Click the color block to change the color of the guide line.

  • Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the width of the tab guide line.

  • Opacity: Click the plus (+) or minus (-) sign, or enter a number to adjust the transparency of the tab guide line.

    Emphasis

  • Emphasis: Deselect the check box to hide the key items of the guide line.

  • Color: Click the drop-down arrow to see more options and select an axis color of the tab guide line. Click the color block to change the axis color of the guide line.

  • Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the axis width of the tab guide line.

  • Opacity: Click the plus (+) or minus (-) sign, or enter a number to adjust the axis transparency of the tab guide line.

    item style

  • Color: Click the drop-down arrow to see more options and select a color of the graphic element. Click the color block to change the color of the graphic element.

  • Border Color: Click the drop-down arrow to see more options and select a border color of the graphic element. Click the color block to change the border color of the graphic element.

  • Border Width: Click the plus (+) or minus (-) sign, or enter a number to adjust the border width of the graphic element.

  • Border Style: Enter a parameter to adjust the border style of the element.

  • Opacity: Click the plus (+) or minus (-) sign, or enter a number to adjust the transparency of the element.

Animation

You can adjust the animations of the widget by using the Animation function.

Animation

  • Animation: Deselect the check box to hide the Animation function.

Widget size and position

You can Click the plus (+) or minus (-) sign, or enter a number to adjust the widget size and position.

widget size and position

Thank you! We've received your feedback.