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

[分享] 低代码同时引入多个森图表

[复制链接]

低代码同时引入多个森图表

发表于 2024-3-13 11:28:21 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon485 zzr_icon0 查看全部
效果图:
低代码同时引入多个森图表


实现步骤:
1.点击应用,生成创建当前森图表的代码:
低代码同时引入多个森图表

2.代码组合:
低代码同时引入多个森图表

全部代码:
  1. // 加载场景代码
  2. var app = new THING.App({
  3.     url: 'https://www.thingjs.com/static/models/factory',  // 场景地址
  4.     background: '#000000',
  5.     env: 'Seaside',
  6. });


  7. // 在线开发引入森大屏图表脚本
  8. THING.Utils.dynamicLoad([
  9.     'https://www.thingjs.com/static/plugins/compile.js',
  10.     'https://www.thingjs.com/static/plugins/vue.min.js',
  11.     // 第一个图表
  12.     'https://charts.thingjs.com/s-static/component/5864cae60cb543a2b97367d4851fed3a.js',
  13.     // 第二个图表
  14.     'https://charts.thingjs.com/s-static/component/da41876768384649b1eacac104f931f4.js'

  15. ],
  16.     function () {
  17.         /**
  18.          * 园区或地图初始化完成后加载图表
  19.          */
  20.         createButton();
  21.         // 第一个图表
  22.         new window.conch['C5864cae60cb543a2b97367d4851fed3a'](document.querySelector('#chartDom'), {
  23.             prefix: 'https://charts.thingjs.com/s-static/'
  24.         }).render();

  25.         // 第二个图表
  26.         new window.conch['Cda41876768384649b1eacac104f931f4'](document.querySelector('#chartDom2'), {
  27.             prefix: 'https://charts.thingjs.com/s-static/'
  28.         }).render();
  29.     })
  30. /**
  31. * 利用模板字符串 创建页面元素并添加到div2d中
  32. */
  33. function createButton() {
  34.     // 使用 bootstrap 样式
  35.     var template =
  36.         `
  37.         <div id='chartDom' style='position:absolute;left:20px;top:20px;z-index:2;width:340px;height:288px;'></div>
  38.         <div id='chartDom2' style='position:absolute;left:20px;top:400px;z-index:2;width:400px;height:250px;'></div>
  39.         `;
  40.     var btn = $('#div2d').append($(template));
  41.     return btn;
  42. }




复制代码


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

本版积分规则

130700ppkpl8x3t7tt1b1t