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

效果图：



实现步骤：
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. 
   
9. // 在线开发引入森大屏图表脚本
   
10. THING.Utils.dynamicLoad([
    
11.     'https://www.thingjs.com/static/plugins/compile.js',
    
12.     'https://www.thingjs.com/static/plugins/vue.min.js',
    
13.     // 第一个图表
    
14.     'https://charts.thingjs.com/s-static/component/5864cae60cb543a2b97367d4851fed3a.js',
    
15.     // 第二个图表
    
16.     'https://charts.thingjs.com/s-static/component/da41876768384649b1eacac104f931f4.js'
    
17. 
    
18. ],
    
19.     function () {
    
20.         /**
    
21.          * 园区或地图初始化完成后加载图表
    
22.          */
    
23.         createButton();
    
24.         // 第一个图表
    
25.         new window.conch['C5864cae60cb543a2b97367d4851fed3a'](document.querySelector('#chartDom'), {
    
26.             prefix: 'https://charts.thingjs.com/s-static/'
    
27.         }).render();
    
28. 
    
29.         // 第二个图表
    
30.         new window.conch['Cda41876768384649b1eacac104f931f4'](document.querySelector('#chartDom2'), {
    
31.             prefix: 'https://charts.thingjs.com/s-static/'
    
32.         }).render();
    
33.     })
    
34. /**
    
35. * 利用模板字符串 创建页面元素并添加到div2d中
    
36. */
    
37. function createButton() {
    
38.     // 使用 bootstrap 样式
    
39.     var template =
    
40.         `
    
41.         <div id='chartDom' style='position:absolute;left:20px;top:20px;z-index:2;width:340px;height:288px;'></div>
    
42.         <div id='chartDom2' style='position:absolute;left:20px;top:400px;z-index:2;width:400px;height:250px;'></div>
    
43.         `;
    
44.     var btn = $('#div2d').append($(template));
    
45.     return btn;
    
46. }
    
47. 
    
48. 
    
49. 
    
50. 
    

复制代码