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

回复

效果图：

实现步骤：
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;
}

复制代码

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