添加并配置可视化组件

本文档为您介绍在空白画布中添加并配置可视化应用组件的方法。

添加并配置地图组件

  1. 登录DataV控制台
  2. 我的可视化页面中,选择已创建的可视化应用,单击编辑

  3. 在画布左侧全部资产栏,单击地图 > 3D平面地图,将3D平面地图组件添加到画布中。

  4. 在画布中单击3D平面地图组件,在右侧的配置面板中删除子组件管理中所有已经添加的子组件。

  5. 单击子组件管理左侧的+号,选择od飞线层单点柱状层,单击添加子组件

  6. 单击进入od飞线层子组件,在配置页自定义修改飞线颜色飞线线型,在数据页将文中的od飞线层数据json文件数据复制粘贴到数据源编辑框中。

  7. 单击进入单点柱状层子组件,在配置页自定义修改柱子高度填充颜色,在数据页将文中的单点柱状层数据json文件数据复制粘贴到数据源编辑框中。

  8. 单击进入3D平面地图组件,进入沉浸模式,下钻到北京市,并在配置页自定义修改地图样式,数据页保持不变。

  9. 配置完成效果,请参考下图。image

单点柱状层数据json文件

[
  {
    "lng": "116.195445",
    "lat": "39.914601",
    "value": 62,
    "sizeField": 62
  },
  {
    "lng": "116.418757",
    "lat": "39.917544",
    "value": 33,
    "sizeField": 33
  },
  {
    "lng": "116.486409",
    "lat": "39.921489",
    "value": 90,
    "sizeField": 90
  },
  {
    "lng": "116.310316",
    "lat": "39.956074",
    "value": 93,
    "sizeField": 93
  },
  {
    "lng": "116.105381",
    "lat": "39.937183",
    "value": 80,
    "sizeField": 80
  },
  {
    "lng": "116.139157",
    "lat": "39.735535",
    "value": 26,
    "sizeField": 26
  },
  {
    "lng": "116.658603",
    "lat": "39.902486",
    "value": 48,
    "sizeField": 48
  },
  {
    "lng": "116.235906",
    "lat": "40.218085",
    "value": 8,
    "sizeField": 8
  },
  {
    "lng": "116.338033",
    "lat": "39.728908",
    "value": 35,
    "sizeField": 35
  },
  {
    "lng": "116.637122",
    "lat": "40.324272",
    "value": 61,
    "sizeField": 61
  },
  {
    "lng": "116.843352",
    "lat": "40.377362",
    "value": 73,
    "sizeField": 73
  },
  {
    "lng": "115.985006",
    "lat": "40.465325",
    "value": 11,
    "sizeField": 11
  },
  {
    "lng": "116.366794",
    "lat": "39.915309",
    "value": 78,
    "sizeField": 78
  },
  {
    "lng": "116.286968",
    "lat": "39.863642",
    "value": 5,
    "sizeField": 5
  },
  {
    "lng": "117.112335",
    "lat": "40.144783",
    "value": 59,
    "sizeField": 59
  },
  {
    "lng": "116.653525",
    "lat": "40.128936",
    "value": 61,
    "sizeField": 61
  }
]

od飞线层数据json文件

[
  {
    "id": 1,
    "name": "安徽省 -> 湖北省",
    "value": 1,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          117.1285001635342,
          40.286711869544185
        ]
      ]
    }
  },
  {
    "id": 2,
    "name": "安徽省 -> 北京市",
    "value": 2,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.7519689833273,
          40.002091020646034
        ]
      ]
    }
  },
  {
    "id": 3,
    "name": "安徽省 -> 天津市",
    "value": 3,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.91626782055476,
          40.5443387995133
        ]
      ]
    }
  },
  {
    "id": 4,
    "name": "安徽省 -> 河北省",
    "value": 4,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.51952384752327,
          40.644585315977665
        ]
      ]
    }
  },
  {
    "id": 5,
    "name": "安徽省 -> 山西省",
    "value": 5,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.47839783929638,
          40.43816003796805
        ]
      ]
    }
  },
  {
    "id": 6,
    "name": "安徽省 -> 内蒙古自治区",
    "value": 6,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.69399528036193,
          39.66245367451081
        ]
      ]
    }
  },
  {
    "id": 7,
    "name": "安徽省 -> 辽宁省",
    "value": 7,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.98377599532307,
          40.19504929561505
        ]
      ]
    }
  },
  {
    "id": 8,
    "name": "安徽省 -> 吉林省",
    "value": 8,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.57951643065338,
          40.341010790596606
        ]
      ]
    }
  },
  {
    "id": 9,
    "name": "安徽省 -> 黑龙江省",
    "value": 9,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.55654661333388,
          40.074821016922925
        ]
      ]
    }
  },
  {
    "id": 10,
    "name": "安徽省 -> 上海市",
    "value": 10,
    "colorField": 1,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.86359734638494,
          39.7596709650833
        ]
      ]
    }
  },
  {
    "id": 11,
    "name": "安徽省 -> 江苏省",
    "value": 11,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.61045980391775,
          39.70074233873841
        ]
      ]
    }
  },
  {
    "id": 12,
    "name": "安徽省 -> 浙江省",
    "value": 12,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          117.21355379094511,
          40.18274628786125
        ]
      ]
    }
  },
  {
    "id": 13,
    "name": "安徽省 -> 福建省",
    "value": 13,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.30487066498964,
          40.23332704297267
        ]
      ]
    }
  },
  {
    "id": 14,
    "name": "安徽省 -> 江西省",
    "value": 14,
    "colorField": 4,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          117.01351979179523,
          40.66620883108799
        ]
      ]
    }
  },
  {
    "id": 15,
    "name": "安徽省 -> 山东省",
    "value": 15,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.08268993216632,
          39.93839530883533
        ]
      ]
    }
  },
  {
    "id": 16,
    "name": "安徽省 -> 河南省",
    "value": 16,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.43665750252885,
          40.07952551044085
        ]
      ]
    }
  },
  {
    "id": 17,
    "name": "安徽省 -> 湖南省",
    "value": 17,
    "colorField": 4,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.89038079638362,
          39.9374523048615
        ]
      ]
    }
  },
  {
    "id": 18,
    "name": "安徽省 -> 广东省",
    "value": 18,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          117.48133808631756,
          40.6647218759069
        ]
      ]
    }
  },
  {
    "id": 19,
    "name": "安徽省 -> 广西壮族自治区",
    "value": 19,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          117.17762041932534,
          40.634776688869465
        ]
      ]
    }
  },
  {
    "id": 20,
    "name": "安徽省 -> 海南省",
    "value": 20,
    "colorField": 1,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.34025030939655,
          40.657178168906135
        ]
      ]
    }
  },
  {
    "id": 21,
    "name": "安徽省 -> 重庆市",
    "value": 21,
    "colorField": 1,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.89619715899187,
          39.66317788544864
        ]
      ]
    }
  },
  {
    "id": 22,
    "name": "安徽省 -> 四川省",
    "value": 22,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          117.05211918995235,
          40.140113961917216
        ]
      ]
    }
  },
  {
    "id": 23,
    "name": "安徽省 -> 贵州省",
    "value": 23,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.03092185544594,
          40.50575601945392
        ]
      ]
    }
  },
  {
    "id": 24,
    "name": "安徽省 -> 云南省",
    "value": 24,
    "colorField": 1,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.96639592117228,
          40.68231106582088
        ]
      ]
    }
  },
  {
    "id": 25,
    "name": "安徽省 -> 西藏自治区",
    "value": 25,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.97818474847793,
          40.226830979836485
        ]
      ]
    }
  },
  {
    "id": 26,
    "name": "安徽省 -> 陕西省",
    "value": 26,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.2956005961121,
          40.56807632268281
        ]
      ]
    }
  },
  {
    "id": 27,
    "name": "安徽省 -> 甘肃省",
    "value": 27,
    "colorField": 2,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.77668095793256,
          39.72400058808163
        ]
      ]
    }
  },
  {
    "id": 28,
    "name": "安徽省 -> 青海省",
    "value": 28,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.18796219648927,
          39.595414775489026
        ]
      ]
    }
  },
  {
    "id": 29,
    "name": "安徽省 -> 宁夏回族自治区",
    "value": 29,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.70434407453467,
          40.691157079628695
        ]
      ]
    }
  },
  {
    "id": 30,
    "name": "安徽省 -> 新疆维吾尔自治区",
    "value": 30,
    "colorField": 1,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.25763113031263,
          40.422435454548726
        ]
      ]
    }
  },
  {
    "id": 31,
    "name": "安徽省 -> 台湾省",
    "value": 31,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.27747200967026,
          40.05904910139394
        ]
      ]
    }
  },
  {
    "id": 32,
    "name": "安徽省 -> 香港特别行政区",
    "value": 32,
    "colorField": 3,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          115.75256914838864,
          39.5545029608671
        ]
      ]
    }
  },
  {
    "id": 33,
    "name": "安徽省 -> 澳门特别行政区",
    "value": 33,
    "colorField": 5,
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [
          116.405285,
          39.904989
        ],
        [
          116.37269721224025,
          39.86220465093939
        ]
      ]
    }
  }
]

添加并配置业务指标趋势

  1. 在画布左侧全部资产栏,单击信息 > 业务指标趋势,将组件添加到画布中。image

  2. 单击组件,在可视化应用右侧的配置面板中,根据效果图配置底层面板中的标题图标数值

    image
  3. 重复上述步骤,完成所有业务指标趋势组件的配置。

添加并配置通用标题

  1. 在画布左侧全部资产栏,单击信息 > 通用标题,将通用标题组件添加到画布中。

    信息-通用标题
  2. 单击组件,在可视化应用右侧的配置面板中,配置通用标题的样式。

    通用标题-样式
  3. 通用标题配置面板中,修改标题名即可。

    image
  4. 重复以上操作,继续添加其他的通用标题组件。

添加并配置数字翻牌器

  1. 在画布左侧全部资产栏,单击信息 > 数字翻牌器组件。

    信息-数字翻牌器
  2. 单击组件,在可视化应用右侧的配置面板中,配置数字翻牌器的样式。

    数字翻牌器-样式
  3. 数字翻牌器数据面板,将value值改成您需要显示的数据。

    配置数字翻牌器组件数据
  4. 重复以上操作,继续添加其他的数字翻牌器组件。

添加并配置时间器

  1. 在画布左侧全部资产栏,单击信息 > 时间器组件。

    image
  2. 配置时间器的样式,修改图标样式时间器等配置

    image

添加并配置进度条

  1. 在画布左侧全部资产栏,单击控件 > 数据类 > 进度条组件。

    image
  2. 配置进度条的样式,修改全局样式百分比条数据等配置。

    image