请选择 进入手机版 | 继续访问电脑版
分享
查看: 505|回复: 0

[分享] 低代码中实现3D场景在中间区域,图表在两侧

[复制链接]

低代码中实现3D场景在中间区域,图表在两侧

发表于 2024-3-13 11:41:35 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon505 zzr_icon0 查看全部
最终效果图:
低代码中实现3D场景在中间区域,图表在两侧

实现过程:
1.理解创建两个App对象:
地址:https://developer.thingjs.com/forum.php?mod=viewthread&tid=2255&page=1&extra=#pid4004

2.修改外面App对象为空场景

实现代码:
  1. var app = new THING.App();

  2. createUI2()
  3. function createUI2() {
  4.     //
  5.     $('#div2d').append(`
  6.     <div style=' position:absolute;top:100px;left:220px;z-index:10;width:500px;height:500px;'>

  7.     <div id="div3d2" style="width:500px;height:500px;"></div>
  8.     </div>`);


  9.     // 第一种:创建第二个3d场景 ,并绑定在id为div3d2的dom元素
  10.     let app2 = new THING.App({
  11.         'el': 'div3d2',
  12.         url: 'https://www.thingjs.com/static/models/factory',
  13.     })
  14. }


  15. // 在线开发引入森大屏图表脚本
  16. THING.Utils.dynamicLoad(['https://www.thingjs.com/static/plugins/thing.charts.min/2.13.6/thing.charts.min.js',
  17.     'https://www.thingjs.com/static/plugins/vue.min.js'], function () {
  18.         // 创建图表
  19.         new THING.CHARTS({
  20.             id: '72aee5870a3d41f09d9c251a03aa57fc', // 大屏id
  21.             container: document.getElementById('div2d'), // 挂载节点
  22.             // 可选参数
  23.             hide3D: true, // 隐藏场景内的3D,默认为false
  24.             hideCanvasBackground: true, // 画布背景色是否设置为透明的,默认false
  25.             baseUrl: 'https://charts.thingjs.com', // 地址
  26.             dataSource: {
  27.                 disable: false, // 是否禁用RestAPI数据,默认false
  28.             },
  29.             complete(ui) {
  30.                 // 回调函数,ui是场景实例
  31.                 console.log(ui, ui.el)
  32.             },
  33.         })
  34.     })
复制代码


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t