How to configure Echarts in the intranet with the ui-template of dashboard2.0? And update the data via msg.payload, no CDN is required
Hi welcome to the forum.
You can serve what the cdn serves yourself using an endpoint (http in > file > http response) or setup httpStatic to host it.
[
{
"id": "4acfc4addde50179",
"type": "ui-template",
"z": "69594495cf1ea8a1",
"group": "67172933099081b6",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "<script src="/echarts.min.js">\n<div id="main" style="height: 300px; width: 300px;">\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 680,
"y": 780,
"wires": [
]
},
{
"id": "67172933099081b6",
"type": "ui-group",
"name": "Demo",
"page": "e3a1a003d3c5fd05",
"width": "6",
"height": "8",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "e3a1a003d3c5fd05",
"type": "ui-page",
"name": "Demo",
"ui": "8edbf6ce4adcc8cd",
"path": "/demo",
"icon": "home",
"layout": "grid",
"theme": "e2eca06675f8744b",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 10,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "8edbf6ce4adcc8cd",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": true
},
{
"id": "e2eca06675f8744b",
"type": "ui-theme",
"name": "pcba-theme",
"colors": {
"surface": "#1e1e1e",
"primary": "#0094ce",
"bgPage": "#121212",
"groupBg": "#1e1e1e",
"groupOutline": "#333333"
},
"sizes": {
"density": "comfortable",
"pagePadding": "20px",
"groupGap": "20px",
"groupBorderRadius": "8px",
"widgetGap": "15px"
}
}
]
As you see,when I put it on node-red, it will show “echarts is not defined”, I don't know how to solve it
Firstly:
In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)
```
code goes here
```
You can edit and correct your post by clicking the pencil 
icon.
See this post for more details - How to share code or flow json
Next: are you serving echarts? If yes how?
Lastly: your template doesn't look right. You should try to adapt a working vue demo like this one: How to configure Echarts in Dashboard 2? - #4 by Steve-Mcl
[
{
"id": "4acfc4addde50179",
"type": "ui-template",
"z": "69594495cf1ea8a1",
"group": "67172933099081b6",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "<script src=\"/echarts.min.js\"></script>\n<div id=\"main\" style=\"height: 300px; width: 300px;\"></div>\n<script>\n var chartDom = document.getElementById('main');\n\nvar myChart = echarts.init(chartDom);\nvar option;\n\noption = {\n xAxis: {\n type: 'category',\n data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\n },\n yAxis: {\n type: 'value'\n },\n series: [{\n data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(180, 180, 180, 0.2)'\n }\n }]\n};\n\noption && myChart.setOption(option);\n\n</script>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 680,
"y": 780,
"wires": [
[]
]
},
{
"id": "67172933099081b6",
"type": "ui-group",
"name": "Demo",
"page": "e3a1a003d3c5fd05",
"width": "6",
"height": "8",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "e3a1a003d3c5fd05",
"type": "ui-page",
"name": "Demo",
"ui": "8edbf6ce4adcc8cd",
"path": "/demo",
"icon": "home",
"layout": "grid",
"theme": "e2eca06675f8744b",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 10,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "8edbf6ce4adcc8cd",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true,
"allowInstall": true
},
{
"id": "e2eca06675f8744b",
"type": "ui-theme",
"name": "pcba-theme",
"colors": {
"surface": "#1e1e1e",
"primary": "#0094ce",
"bgPage": "#121212",
"groupBg": "#1e1e1e",
"groupOutline": "#333333"
},
"sizes": {
"density": "comfortable",
"pagePadding": "20px",
"groupGap": "20px",
"groupBorderRadius": "8px",
"widgetGap": "15px"
}
}
]
As you see,when I put it on node-red, it will show “echarts is not defined”, I don't know how to solve it
Please answer question otherwise I cannot help
Also, as I said before:
