Visualization Server User Manual

User Manual	Version	Compiled By	Date
Big Data Visualization Plugin	V1.0.0	Wang Jiale	2025.03.03

Front-end and Back-end Plugin Installation

1. Server => Server Management => Big Data Visualization Installation
2. Front-end => Plugin Management => Big Data Visualization Plugin

Component Configuration Example

• Specific configurations require support for visualization chart concepts. Reference address for visualization chart concepts (ECharts Reference Documentation).

• Address of the visualization example project: Visualization Example Project.

• Drag a visualization component (the component will have a default style).

• Configure data binding.

• Bind model groups, data models, and x and y-axis data.

• Configure component styles.

• Configure special effects.

1. Configure the chart refresh time in seconds.

Preview of All Components

• Line charts, bar charts, and mixed bar-line components.

  

• Flying line chart component.

  

• Radar chart.

  

• Digital flipper.

  

• Time display component.

  

• Featured component.

  

• Dynamic ring chart component.

  

• Capsule bar chart component.

  

• Progress bar component.

  

• Gauge component.

  

• Pie charts and rose pie charts.

  

• Water level chart component.

  

• Progress pool.

  

• Decoration component.

  

• Border component.

  

• Digital flipper.

  

• Funnel chart.

  

• Map component.

  

Preview of the Page with Configured Visualization Components

Service Data Docking

Data Editing

1. Edit the default database data directly in the table.

Support for MySQL Data Types

• Add MySQL data and fill in the data model name, data model group name, data model type, and data model SQL statement.

  

• Edit the SQL statement for the MySQL data type and observe the results in the preview.

  

  

API Interface Service Docking

1. Create a data model group

     Method：Post
     Request：http://127.0.0.1:10000/charts/groups/add
     Parameters：
     {
       "name": "测试1"
     }

2. Create a data model

     Method：Post
     Request URL：http://127.0.0.1:10000/charts/group/addModel
     Parameters：
    {
      "groupId": "7d83ace0-8006-4aa6-bde3-2169b26f0b7c",
      "title": "456789",
      "type": "default"
    }

3. Update the data of the data model

     Method：Post
     Request URL：http://127.0.0.1:10000/charts/group/model
     Parameters：
      {
         "groupId": "7d83ace0-8006-4aa6-bde3-2169b26f0b7c", // 分组id
         "id": "1816598a-79de-48bc-aafe-23a9663292b9",     // 数据模型id
         "title": "567888",
         "header": ["name","value"],
         "list": [["王同学","100"]]
      }

外部数据服务对接

1. The third-party service provides a data link in a format that meets the visualization requirements. To reduce the error rate during the configuration process, the request format is (GET). Here is an example of the data

   {
      "message": "success",
      "code": 0,
      "data": {
        "title": "拦截笔数发卡行", 
         "header": ["银行名称","数量"],
         "list": [
           ["中国银行","62"],
           ["中国建设银行","95"],
           ["中国工商银行","66"],
           ["中国人民银行","54"],
           ["中国华夏银行","98"],
           ["上海浦发银行","45"],
           ["招商银行","77"],
           ["苏州银行","88"],
           ["中国光大银行","91"],
           ["中国农业银行","65"]
         ]
      }
    }

2. 配置组件绑定外部URL数据

   

3. Configure the component to bind external URL data

4. Preview the configuration effect