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

yamazaki1201 发表于 2024-3-13 11:28:21

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

效果图：



实现步骤：
1.点击应用，生成创建当前森图表的代码：


2.代码组合：


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


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

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

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

18796012756@163.com 发表于 4 天前

如何进行离线部署呢，森图表

查看完整版本: 低代码同时引入多个森图表