DataV:Implement data screening

Effect display

Procedure

1. Access the DataV console.

2. Navigate to any data dashboard and click Edit to access the canvas editor.

3. Add a Column Chart widget and a List Carousel widget to the canvas.

4. Select the List Carousel widget, go to the Style panel, set Global > Number Of Table Rows to 2, enable the Hide Empty Rows option, and update the Column Field Name and Column Display Name for the custom column labels.

   Note

   • Column field name - Column display name: name - 名称.

   • Column field name - Column display name: value - 指标.

   • Column field name - Column display name: type - 城市.

5. Select the Column Chart widget, choose the Data Source panel, and modify the static data.

   [
     {
       "x": "上海",
       "y": 100,
       "colorField": 100
     },
     {
       "x": "深圳",
       "y": 75,
       "colorField": 200
     },
     {
       "x": "合肥",
       "y": 30,
       "colorField": 300
     },
     {
       "x": "成都",
       "y": 65,
       "colorField": 400
     },
     {
       "x": "安徽",
       "y": 50,
       "colorField": 500
     },
     {
       "x": "北京",
       "y": 70,
       "colorField": 600
     }
   ]

6. Click the Column Chart widget, navigate to the Style panel, and disable the Sweep Animation.

7. Click the icon in the upper left corner to enter the blueprint view.

8. Go to the Global Variable tab and click New Variable.

9. Rename the variable to x and set its initial value.

   [
     {
       "name": "上海项目1",
       "value": 111,
       "type": "上海"
     },
     {
       "name": "上海项目2",
       "value": 222,
       "type": "上海"
     },
     {
       "name": "深圳项目1",
       "value": 111,
       "type": "深圳"
     },
     {
       "name": "深圳项目2",
       "value": 222,
       "type": "深圳"
     },
     {
       "name": "合肥项目1",
       "value": 111,
       "type": "合肥"
     },
     {
       "name": "合肥项目2",
       "value": 222,
       "type": "合肥"
     },
     {
       "name": "成都项目1",
       "value": 111,
       "type": "成都"
     },
     {
       "name": "成都项目2",
       "value": 222,
       "type": "成都"
     },
     {
       "name": "安徽项目1",
       "value": 111,
       "type": "安徽"
     },
     {
       "name": "安徽项目2",
       "value": 222,
       "type": "安徽"
     },
     {
       "name": "北京项目1",
       "value": 111,
       "type": "北京"
     },
     {
       "name": "北京项目2",
       "value": 222,
       "type": "北京"
     }
   ]

10. Add two layer nodes and a serial data processing node to the main canvas of the blueprint and connect them accordingly.

11. Set up the data processing method for the serial data processing node.

    const allData = getLocalValue("x");//Get the static value of the global variable
    return allData ? allData.filter(d => {
      return d.type == data.x;//Match the value of the x field in the column chart with the value of the type field in the static value of the global variable to implement data screening
    }) : [];

12. Click the Preview icon in the upper right corner to review the display results.