云朵数屏文档

Appearance

当前页面内容

运行项目 ​

项目预览 ​

在编辑状态，项目预览时会自动保存项目数据

工具栏按钮列表项按钮

下载项目 ​

将项目下载到用户本地的设备上，下载的项目是编辑的数据信息，不包含配置引用的外部素材文件

工具栏按钮列表项按钮

运行项目 ​

项目的运行主要分为：rdPlay播放器、自定义两种方式

rdPlay播放器 ​

播放器有在线版与本地安装版
两个版本的操作方式是相同的，都是通过选择运行文件或输入项目文件地址运行。

自定义 ​

我们提供了，vue插件与javascript代码嵌入两种选择

vue插件 ​

使用npm安装包

js
npm i rd-play

安装组件

js
import { createApp } from 'vue'
import rdPlay from 'rd-play'

const app = createApp(App)
app.use(rdPlay)

SFC 中使用组件

js
<template>
  <rd-play data="项目文件地址或项目文件数据" />
</template>

props 属性

名称类型默认值说明
dataObject,String{}项目文件地址或项目文件数据
widthNumber,String960宽度
heightNumber,String540高度
optionObjectnull运行相关参数

props 事件

名称返回值说明
init数据源开始初始化
success数据值完成数据加载
error类型加载数据报错

html文件 ​

html
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>RdPlay 让数据可视化</title>
   <link rel="stylesheet" href="https://rde-1251496115.cos.ap-shanghai.myqcloud.com/soft/rdplay.css">
   <script src="https://rde-1251496115.cos.ap-shanghai.myqcloud.com/soft/rdplay.js?r=12"></script>
   <style>
      body {
         margin: 0;
         background-color: black;
      }
      #rdPlay {
         position: absolute;
         width: 100%;
         height: 100%;
      }
   </style>
</head>
<body>
   <div id="rdPlay" data-data="https://rde-1251496115.cos.ap-shanghai.myqcloud.com/projects/A_nDTokkcSO-.json"></div>
</body>
</html>