ThingJS is an advanced PaaS development platform that allows developers to easily and securely develop cloud-based tools anytime, anywhere.
ThingJS Interface Overview To make it easier for developers to develop interfaces under ThingJS, ThingJS provides the following interface architecture directory:
In the above ThingJS interface system, the area for 3D scene visualization is defined as 3D container, as shown in the figure below:
3D and 2D interface display capabilities are provided in the 3D “container”, as shown below:
3 d interface
Marker: ICONS and pictures drawn on Canvas can be displayed in 3D scenes or bound to 3D objects. WebView: You can embed pages into 3D scenes. 2 d interface
Native interface: Users can write native interfaces using JS code to insert DOM elements into the corresponding nodes. Shortcut interface library: built-in various component modules for users to splice and assemble. UIAnchor: You can “hook” a normal 2D interface to a 3D object and make it move with the object. Provide open bar components (such as open bar, side bar) outside the 3D “container”. If you want to build a standalone application based on ThingJS, you can use the sidebar component as a system-level menu.
ThingJS, a 3D interface, mainly provides Marker objects and WebView objects to support 3D spatial interfaces.
Marker object
Marker objects can add a picture to the location you want, or they can be added to the object as a child and move with the object.
Example 1:
App. create({type: “Marker”, offset: [0, 2, 0], size: [4, 4], URL: “thingjs.com/static/imag…” , parent: app.query(“car01”)[0] });
Parameters:
Type: notifies the system to create Marker objects; Offset: sets the offset in its own coordinate system to [0, 2, 0]. Size: Set the size of the Marker object, or add a single number such as 4, which is equivalent to [4,4]. The size is calculated in meters. Url: the URL of the image; Parent: Specifies the parent object of Marker; The running result is shown in the following figure. By default, Marker is affected by distance and presents a 3D effect of large near and small far, and also realizes front and back occlusion in 3D space.
Example 2:
App. create({type: “Marker”, offset: [0, 8, 0], size: 2, keepSize: true, url: “thingjs.com/static/imag…” , parent: app.query(“.Building”)[1] });
Parameters:
KeepSize: Control whether the distance is affected, showing the 3D effect of large near and small far. If the value is set to true, the size of the screen is maintained. Offset: sets the offset in its own coordinate system to [0, 2, 0]. Size: Set the size of the Marker object, or add a single number such as 4, which is equivalent to [4,4]. The size is calculated in meters. Url: the URL of the image; Parent: Specifies the parent object of Marker; The running result is shown in the following figure:
We can also create dynamic diagrams manually using the H5 canvas.
Example 3:
function createTextCanvas(text, canvas) { if (! canvas) { canvas = document.createElement(“canvas”); canvas.width = 64; canvas.height = 64; }
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(32, 32, 256)";
ctx.beginPath();
ctx.arc(32, 32, 30, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = "rgb(255, 255, 255)";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(32, 32, 30, 0, Math.PI * 2);
ctx.stroke();
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.font = "32px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(text, 32, 32);
return canvas;
Copy the code}
app.on(‘load’, function (ev) { var marker = app.create({ type: “Marker”, offset: [0, 2, 0], size: 3, canvas: createTextCanvas(‘100’), parent: app.query(‘car02’)[0] }).on(‘click’, function (ev) { var txt = Math.floor(Math.random() * 100); ev.object.canvas = createTextCanvas(txt, ev.object.canvas) }) })
Parameters:
Canvas: Canvas is received as a map to display the running result as shown below. When clicking on Marker, the number on the Marker will be changed:
We can use WebView objects to embed the content of other websites or pages into 3D.
Example 4:
var webView01 = app.create({ type: ‘WebView’, url: ‘www.thingjs.com’, position: [10, 13, -5], width: DomWidth: 1920, // domHeight: 1080 * 0.01, // domWidth: 1920, // 1080// page height unit px});
View sample 2D HTML interface JS authoring native interface var template = ‘
Hello World!
Into Level
To help people write interfaces quickly, we offer a “shortcut interface library” that allows you to create interfaces quickly.
UIAnchor also has a magical function, even if it is a 2D HTML interface, we can still connect it to a 3D object and follow the 3D object to move. We use UIAnchor object to achieve this function.
The following is an example:
var uiAnchor = app.create({ type: “UIAnchor”, parent: app.query(“car02”)[0], element: document.getElementById(“XXXX”), localPosition: [0, 2, 0], pivot: [0.5, 1] });
Parameters:
Pivot: Specifies which point of the page to place in localPosition. 0.5 equals 50%. See an example
The UIAnchor method is:
uiAnchor.destroy();
Note: After deletion, its corresponding panel will also be deleted
The methods to show and hide UIAnchor are:
uiAnchor.visible = true / false;
Interface written with JS:
You can use UIAnchor to connect to 3D objects.
You can also use the shortcut interface library to create a Panel that connects to an object as a UIAnchor.
See the sample
THING. Widget is a lightweight interface library that supports dynamic data binding.
You can create a Panel from the Panel component in the interface library and add text, numbers, checkboxes, checkboxes, and other components to the Panel.
The effect is as follows:
Var panel = new thing.widget. panel ({// Set the panel style template: ‘default’, // corner style cornerType: “None “, // Set the panel width: “300px”, // whether there is a title hasTitle: true, // Set the title name titleText: “I am the title “, // whether the panel allows closeIcon: true, // whether the panel supports dragable: Retractable: true, // Set opacity: 0.9, // set level zIndex: 99});
Width: indicates the relative width (relative to the width of the 3D container) if you write a percentage string. Template: Currently, the template styles provide two styles, default and default2, as shown below:
CornerType: cornerType refers to the corner style, which is: no corner none, noline corner noline, polyline corner polyline; See the following figure in sequence:
Note: All corner styles are case insensitive
If the close button is set in the panel panel, the panel will be set to hide when clicking the Close button. If you need to open the panel again, call panel.visible = true; Display panel.
// Get the panel label Panel.domElement;
Panel. titleText=’ titleText ‘;
// Set/get panel.visible = true/false; panel.position = [10, 10]; // Set the position of panel panel. ZIndex = 9; A panel. The opacity = 0.5;
// Delete panel.destroy();
Panel. on(“click”, callback); // The ‘close’ event triggers panel.on(“close”, callback);
Var dataObj = {pressure: “0.14mpa “, Temperature: “21°C”, checkbox: {Device 1: false, device 2: false, device 3: True, device 4: true}, radio: “camera 01”, open1: true, height: 10, maxSize: 1.0, iframe: “www.3dmomoda.com”, progress: 1, img: “Www.thingjs.com/guide/image…” , button: false };
Var press = panel.addString(dataObj, ‘pressure’). Caption (‘ water ‘).ischangevalue (true); Var panel. AddNumber (dataObj, ‘height’). Caption (‘ height’); Var maxSize = panel.addNumberSlider(dataObj, ‘maxSize’).step(0.25).min(1).max(10); Var open1 = panel.addBoolean(dataObj, ‘open1’). Var radio = panel.addRadio(dataObj, ‘dataObj ‘, [‘ 01′,’ 02′]); var radio = panel.addRadio(dataObj, ’01’,’ 02′); Var check = panel.addCheckBox (dataObj, ‘checkbox’). Select ({” select 2″: “rename”}); Var iframe = panel. AddIframe (dataObj, ‘iframe’). Caption (‘ video ‘); Var img = panel. AddIframe (dataObj, ‘img’). Caption (‘ image ‘); Var button = panel. AddImageBoolean (dataObj, ‘button). The caption (‘ warehouse number’). A url (‘ www.thingjs.com/static/imag… ‘);
Interface library can set the Caption font color: as shown in the following example:
Var press = panel.addString(dataObj, ‘pressure’).Caption (” water “).ischangevalue (true); Var water = panel.addString(dataObj, ‘temperature’). Caption (” water “).ischangevalue (true); Var check = panel.addCheckBox (dataObj, ‘checkbox’). Select ({” select 2″: “rename”}); Var open1 = panel.addBoolean(dataObj, ‘open1’). Var panel. AddNumber (dataObj, ‘height’). Caption (” height “); Var maxSize = panel.addNumberSlider(dataObj, ‘maxSize’). Caption (“maxSize”).step(0.25).min(1).max(10); Var iframe = panel. AddIframe (dataObj, ‘iframe’). Caption (‘ video ‘);
The effect is as follows:
Remove component panel.remove(press); panel.remove(radio); .
Component methods This section describes common component methods:
// Set the name Element. caption(” Water pressure “); // Sets the value to allow changing element.isChangevalue (true); // Set explicit element.show(true);
The NumberSlider component also has the following methods:
// Set the slider step element.step(0.25); // Set the slider’s minimum value, element.min(-10); // Set the slider’s maximum value, element.max(10); // Convert absolute values to percentages element.ispercentage (true);
The Iframe component also has the following methods:
// Set iframe to the height of element.setheight (“300px”);
Component event Change event
press.on(“change”, function(ev) { console.log(ev); }); // Note that the checkBox returns an array. Check [0]. On (“change”, function(ev) {console.log(ev); });
Examples of shortcut interface library here we will list several interface examples for your reference to learn.
Icon button panel Create picture button panel:
var toolbar = new THING.widget.Panel({ width: “163px”});
Note: The picture button panel can be set with two display modes of title, which can be set through captionPos. By default, the title is displayed under the picture, and can also be set as mouse slide effect.
// Set it to hover effect: var toolbar = new thing.widget. Panel({width: “163px”,captionPos:’hover’});
As shown below:
Data in panel:
Var obj = {warehouseCode: false, temperature: false, humidity: false, statistics: false, status: false, insect: {warehouseCode: false, temperature: false, humidity: false, statistics: false, status: false, insect: false, cerealsReserve: false, video: false, cloud: true, orientation: true };
Add button and introduce font icon file:
Var button0 = tool.addimageBoolean (dataObj, ‘warehouseCode’).url(‘# momoda_lC-icontubiao10 ‘); Var button1 = tool.addimageBoolean (dataObj, ‘temperature’). Caption (‘# momoda_lC-icontubiao2 ‘); var button2 = toolbar.addImageBoolean(dataObj, If (‘# momoda_lCC-icontubiao5 ‘) var Button3 = tool.addimageBoolean (toolbar. ‘statistics’). Caption (‘# momoda_lC-icontubiao20 ‘). Var button4 = tool.addimageBoolean (dataObj, ‘status’). Caption (‘# momoda_lC-icontubiao ‘); Var button5 = tool.addimageBoolean (dataObj, ‘insect’).url(‘# momoda_lcc-icontubiao11 ‘); Var button6 = tool.addimageBoolean (dataObj, ‘cerealsReserve’). Caption (‘# momoda_lCC-icontubiao21 ‘); Var Button7 = tool.addimageBoolean (dataObj, ‘video’). Caption (‘# momoda_lC-icontubiao9 ‘); Var button8 = tool.addimageBoolean (dataObj, ‘cloud’). Caption (‘# momoda_lC-icontubiao16 ‘); Var button9 = tool.addimageBoolean (dataObj, ‘orientation’). Caption (‘# momoda_lCC-icontubiao10 ‘);
Button to add registration event:
Button0.on (‘change’, function (state) {// Boolean returns whether the button is clicked on the state console.log(state); });
Panel effect picture:
View the sample Tab panel to create a picture button panel:
Var panel = thing.widget. panel ({template: “default”, hasTitle: true, titleText: “closeIcon “, closeIcon: true, dragable: true, retractable: true, width: “380px” });
Data in panel:
Var obj = {‘ basic information: {‘ species’ : “wheat”, ‘inventory number: “6100”,’ keeper: “zhang”, ‘put in storage time: “19:02,”‘ electricity ‘: “100”,’ single bin accounting: “no”}, ‘grain situation information: {‘ barn temperature: “26”, ‘food temperature: “22”},’ alarm message: {‘ temperature ‘: “22”, “fire” : “no”, “pests” : “no”},’ adding components: {}};
Data is added to the panel via addTab:
panel.addTab(obj);
Add to a Tab of a Tab by link:
Var check = panel.addCheckBox (dataObj, ‘checkbox’).Caption ({” device 2″: “device 2(rename)”}).link(” Add component “); Check [0]. On (‘change’, function(ev) {console.log(ev); }); check[1].on(‘change’, function(ev) { console.log(ev); Var radio = panel.addRadio(dataObj, ‘radio’, [‘ camera 01’, ‘camera 02’]).link(” Add component “); radio.on(‘change’, function(ev) { console.log(ev); Var open1 = panel.addBoolean(dataObj, ‘open’).Caption (‘ 01’).link(” Add component “); open1.on(‘change’, function(ev) { console.log(ev); })
Var numberSlider = panel.addNumberSlider(dataObj, ‘value’). Step (0.5). Min (1). Max (10) isChangeValue (true). The link (” add components “); numberSlider.on(‘change’, function(ev) { console.log(ev); })
Var iframe = panel.addiFrame (dataObj, ‘iframe’).Caption (‘ Video ‘).link(” Add component “); // Set iframe height iframe.setheight (“400px”);
TAB panel effect picture:
View an example progress bar There are two main types of progress bars:
Numerical progress bar create Panel:
Var panel = new thing.widget. panel ({titleText: “progress bar “, width: ‘400px’, hasTitle: true});
Add progress bar and bind data:
panel.position = [10, 10]; Panel. AddNumberSlider (dataObj, ‘altitude ‘).step(1).min(0).max(123); Panel. AddNumberSlider (dataObj, ‘temperature ‘).step(1).min(-20).max(40).ischangevalue (true).on(‘change’, Function (value) {console.log(‘ temperature ‘+ value); }); Panel. AddNumberSlider (dataObj, ‘population number ‘).step(1).min(0).max(123).isChangevalue (true); Panel.addNumberSlider(dataObj, ‘population ratio ‘).step(1).min(0).max(123).ischangevalue (true).ispercentage (true);
The parameters are as follows:
IsChangeValue can interact with the progress bar. IsPercentage Converts absolute values to percentages. Numerical progress bar effect picture:
Navigation class progress bar create Panel:
Var panel2 = new thing.widget. Panel({titleText: “navigation progress bar “, width: ‘400px’, hasTitle: true});
Add progress bar and bind data:
Var progress = bar.addprogress (dataObj, ‘progress’, describe: ‘building ‘, {name: ‘3 building ‘, describe: ‘lab building’}, {name: ‘the 5th floor, the describe:’ indoor basketball courts’}, {name: ‘restaurants’, the describe:’ five-star ‘}, {name: ‘lecture hall, the describe:’ the first ‘}]);
Progress bar changes:
progress.on(‘change’, function (id) { console.log(id); });
Progress bar Unit Playback time:
Progress. time(3000) // The unit is ms. The default value is 5000ms
Update:
setInterval(function () { if (dataObj.progress >= 4) dataObj.progress = 0; else dataObj.progress++; }, 1000);
Navigation progress bar effect picture:
In the “Shortcut Interface Library” chapter, you can create a Panel and then create an IFrame component to reference external page resources, as shown in the following example:
Var panel = new thing.widget. panel ({‘width’:’400px’}); var panel = new thing.widget. panel ({‘width’:’400px’});
Var dataObj = {‘iframe’: ‘forum.thingjs.com/’};
var iframe = panel.addIframe(dataObj, ‘iframe’).caption(‘iframe’); // Set iframe height iframe.setheight (‘800px’); // Get the real IFrame Dom node by using domElement to wrap the iframe div iframe.domElement.getElementsByTagName(‘iframe’)[0]; // Iframedom.scrolling = “auto”; // Iframedom.scrolling = “auto”;
With this capability, users can embed their own pages into ThingJS for more flexibility.
The iframe introduced in this way cannot be used to create A UIAnchor, but is embedded into ThingJS as a normal page element.
If you want to communicate between iframe and ThingJS online development environment pages, you need to discuss both “co-domain” and “cross-domain.”
Syndomain iframe communication is syndomain with the ThingJS online development environment for pages uploaded from the ThingJS web site.
In this case, we get the referenced IFrame Dom node in ThingJS and call the global function in the corresponding child page directly through the contentWindow. For example:
/ / called sympatric iframeDom changeText method within the iframe page. The contentWindow. ChangeText (‘ the from ThingJS ‘);
Accordingly, the iframe subpage can also call the ThingJS online development page function methods, such as:
/ / the iframe page through the window. The parent to obtain and call ThingJS online function method in the development environment of the window. The parent. The changeLevel (‘ car01 ‘);
See the sample
The iframe page code for the above example is as follows:
Hello World!
The postMessage interface provided by HTML5 can be used to implement mutual function method calls between iframe pages across domains.
For details on the postMessage API, click here
For example, to the iframe ThingJS reference child pages (https://localhost:3000/pages/index.html) sends a message
iframeDom.contentWindow.postMessage
The first argument to the postMessage method is the concrete message content;
The second parameter is the origin of the window that receives the message, that is, “protocol + domain + port”. The value can also be * (*), which indicates that the domain name is not limited and is sent to all Windows.
In the Iframe page, listen for messages sent from the ThingJS page via the Message event.
window.addEventListener(‘message’, function(event) { console.log(event.data);
The event object for the message event, which provides the following three properties:
Origin: indicates the origin (domain name, protocol, and port) of the message sending window
The iframe page code for the above example is as follows:
Hello World!
Var Banner = new thing.widget. Banner({column:’left’});
Var banner = new thing.widget. banner ({column:’left’});
In the column parameter, ‘top’ is the top column (default), and ‘left’ is the left column.
Var dataObj = {warehouseCode: false, Temperature: false, Humidity: false, statistics: false, status: false, insect: false, cerealsReserve: false, video: true, cloud: true };
Var img0 = banner. AddImageBoolean (dataObj, ‘warehouseCode’). Caption (‘# momoda_lC-icontubiao10 ‘); AddImageBoolean (dataObj, ‘temperature’). Caption (‘# momoda_lC-icontubiao2 ‘); Var img2 = banner. AddImageBoolean (dataObj, ‘humidity’). Caption (‘#momoda_lc-icontubiao5’); Var img3 = banner. AddImageBoolean (dataObj, ‘statistics’). Caption (‘# momoda_lC-icontubiao20 ‘); Var img4 = banner.addimageBoolean (dataObj, ‘status’). Caption (‘# momoda_lC-icontubiao ‘); Var img5 = banner. AddImageBoolean (dataObj, ‘insect’). Var img6 = banner. AddImageBoolean (dataObj, ‘cerealsReserve’). Caption (‘# momoda_lCC-icontubiao21 ‘); Var img7 = banner. AddImageBoolean (dataObj, ‘video’). Caption (‘# momoda_lC-icontubiao9 ‘); Var imG8 = banner. AddImageBoolean (dataObj, ‘cloud’). Caption (‘# momoda_lC-icontubiao16 ‘);
The effect is as follows:
As mentioned in the “Shortcut Interface Library” chapter, for the Panel component Panel, you can set the Position property to determine its position within the 3D container.
When the value in Position is a number, the absolute position is performed in pixels.
When the value in Position is a percentage string, it is positioned relative to the 3D container size.
Var panel = new thing.widget. panel ({hasTitle: true, // whether to allow a panel title titleText: “panel “, // set the title title title name width: ‘200px’ }); Var dataObj = {temperature: 0 ℃, humidity: 0%, aqi: 0%,}; AddString (dataObj, ‘temperature’). Caption (‘ temperature’); Panel. AddString (dataObj, ‘humidity’). Panel. AddString (dataObj, ‘aqi’). Caption (‘ Air quality ‘);
When the value in Position is a percentage string, it is positioned relative to the 3D container size.
// 100px left from 3D container, 100px top panel. Position =[100,100]; Position =[200,’60%’] // 30% to the left of the 3D container, 200px panel.position=[‘30%’,200] // 50% to the left of 3D container, 50% to the top of panel.position=[‘50%’,’50%’]
Panel anchors The Panel Panel provided in the ThingJS shortcut library can be positioned according to its anchor points.
For a Panel Panel, four anchor point types are provided for positioning, respectively:
BottomRight is positioned based on the TopLeft corner by default.
The anchor type can be set through the positionOrigin property
// Based on top left (default) panel. PositionOrigin = ‘TL’; // top left // Bottom left panel. PositionOrigin = ‘BL’; // bottom-left // Based on the top right panel. PositionOrigin = ‘TR’; // top-right // Based on the top right panel. PositionOrigin = ‘BR’; // bottom-right
For example, when setting the panel anchor point to the lower right corner, the setting position effect is as follows:
ThingJS reference Echarts
View example Reference Steps load echarts.js The purpose of loading echarts.js is to reference charts in the Echarts chart library.
DynamicLoad loads js with the thing.utils. dynamicLoad method, which takes two arguments:
The first argument is the URL (link address) of echarts.js; The second parameter for loading echarts. Js called after the callback method THING. Utils. DynamicLoad ([‘ cdn.bootcss.com/echarts/4.1… ‘], the function () {})
Create required DOM nodes. DOM nodes are nodes that need to be displayed in the scenario.
Create a new DOM node with document.createElement.
Due to DEMO requirements, three DOM nodes are created here, which are:
Background color div; The title div. Bottom chart div; Var bottomBackground = document.createElement(‘div’); Var bottomFont = document.createElement(‘div’); Var bottomDom = document.createElement(‘div’); Var backgroundStyle = ‘bottom:0px; position: absolute; right:0px; height:400px; width:600px; Background: rgba (41,57,75,0.74); ‘; Var fontStyle = ‘position: absolute; top:0px; right:0px; Color: rgba (113252244, 1); height:78px; width:600px; line-height: 45px; text-align: center; top: 20px; ‘; Var chartsStyle = ‘position: absolute; top:80px; right:0px; width:600px; height:300px; ‘;
/ / set the style bottomBackground setAttribute (‘ style ‘backgroundStyle); bottomFont.setAttribute(‘style’, fontStyle); bottomDom.setAttribute(‘style’, chartsStyle);
// bottomFont. InnerHTML = ‘Average change of temperature and precipitation ‘;
Initialize Echarts After loading echarts.js, you have introduced Echarts into the scene. To get an example of a chart, do the following two steps:
Call window.echarts to get echarts; The init method is used to create a chart instance, passing in the DOM node that needs the Echarts chart and returning the chart instance. For details about how to initialize Echarts, please refer to Echarts
let bottomCharts = window.echarts.init(bottomDom)
You can click on the Echarts website configuration item manual.
The best thing to do is to go to the Echarts website or ChartBuilder website and configure the options for the chart. Let echartOptions = {“tooltip”: {“trigger”: “axis”, “axisPointer”: { “type”: “cross”, “crossStyle”: { “color”: “#999” } } }, “legend”: { “textStyle”: { “color”: “auto” }, “data”: [” evaporation “, “rain”, “average temperature”]}, “xAxis” : [{” axisLabel “: {” textStyle” : {” color “:” # FFF “}}, “type” : “category”, “data” : [” January “, “February”, “march”, “April”, “may”, “June”, “July”, “August”, “September”, “October”, “November”, “December”], “axisPointer” : {” type “: “Shadow”}}], “yAxis” : [{” type “:” value “, “name” : “water”, “min” : 0, “Max” : 250, “interval” : 50, “splitLine” : { “lineStyle”: { “type”: “dotted” }, “show”: true }, “nameTextStyle”: { “color”: “#fff” }, “axisLabel”: { “textStyle”: { “color”: “#fff” }, “formatter”: “{value} ml” } }, { “splitLine”: { “lineStyle”: { “type”: “dotted” }, “show”: True}, “type” : “value”, “name” : “temperature”, “min” : 0, “Max” : 25, “interval” : 5, “nameTextStyle” : {” color “: “# FFF”}, “axisLabel” : {” textStyle “: {” color” : “# FFF}”, “the formatter” : “° C {value}}}],” series “: [{” name” : “Evaporation”, “type” : “bar”, “data” : [2, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3]}, {” name “: “Rain”, “type” : “bar”, “data” : [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3]}, {” name “: “Average temperature “, “type”: “line”, “yAxisIndex”: 1, “data”: [2, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23, 16.5, 12, 6.2]}], “color” : [ “#2b908f”, “#90ee7e”, “#f45b5b”, “#7798BF”, “#aaeeee”, “#ff0066”, “#eeaaee”, “#55BF3B”, “#DF5353”, “#7798BF”, “#aaeeee” ] } bottomCharts.setOption(echartOptions);
The nodes on the app under the dom bottomBackground. The appendChild (bottomFont); bottomBackground.appendChild(bottomDom); app.domElement.appendChild(bottomBackground);