I have managed to create an echart with the template node. However, i am not able to display the tooltip with the legend. Can anybody help?
Here my node:
[
{
"id": "c4f7b79d0d16995b",
"type": "ui-template",
"z": "1c6c6bc511cd2d54",
"group": "459ee3e2b7fa9235",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": "6",
"height": "6",
"head": "",
"format": "<template>\n <div ref=\"charttpw\" style=\"width: 500px; height: 400px\" id=\"chart-container\"></div>\n</template>\n\n<script type=\"text/javascript\" src=\"https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js\"></script>\n<!-- <script type=\"text/javascript\" src=\"http://debiancloud:8090/f/524\"></script> -->\n<style lang=\"css\">\n .chart-container {\n width: 100%;\n height: auto;\n }\n</style>\n<script>\n //import * as echarts from 'echarts';\n export default {\n data() {\n return {\n myChart: null\n }\n },\n watch: {\n msg: function () {\n // check if echart is already instantiated\n let interval = setInterval(()=>{\n if(this.myChart){\n clearInterval(interval)\n // if (this.msg.topic === \"data\") {\n // this.update(this.msg.payload.labels, this.msg.payload.Temp_series, this.msg.payload.RH_series, this.msg.payload.title)\n // } \n }\n },200);\n }\n },\n mounted() {\n this.etheme = {\n \"version\": 1,\n \"themeName\": \"shine\",\n \"theme\": {\n \"seriesCnt\": \"4\",\n \"backgroundColor\": \"rgba(0,0,0,0)\",\n \"titleColor\": \"#333333\",\n \"subtitleColor\": \"#aaa\",\n \"textColorShow\": false,\n \"textColor\": \"#333\",\n \"markTextColor\": \"#eee\",\n \"color\": [\n \"#c12e34\",\n \"#e6b600\",\n \"#0098d9\",\n \"#2b821d\",\n \"#005eaa\",\n \"#339ca8\",\n \"#cda819\",\n \"#32a487\"\n ],\n \"borderColor\": \"#ccc\",\n \"borderWidth\": 0,\n \"visualMapColor\": [\n \"#1790cf\",\n \"#a2d4e6\"\n ],\n \"legendTextColor\": \"#333333\",\n \"kColor\": \"#c12e34\",\n \"kColor0\": \"#2b821d\",\n \"kBorderColor\": \"#c12e34\",\n \"kBorderColor0\": \"#2b821d\",\n \"kBorderWidth\": 1,\n \"lineWidth\": 2,\n \"symbolSize\": 4,\n \"symbol\": \"emptyCircle\",\n \"symbolBorderWidth\": 1,\n \"lineSmooth\": false,\n \"graphLineWidth\": 1,\n \"graphLineColor\": \"#aaa\",\n \"mapLabelColor\": \"#c12e34\",\n \"mapLabelColorE\": \"#c12e34\",\n \"mapBorderColor\": \"#eee\",\n \"mapBorderColorE\": \"#ddd\",\n \"mapBorderWidth\": 0.5,\n \"mapBorderWidthE\": 1,\n \"mapAreaColor\": \"#ddd\",\n \"mapAreaColorE\": \"#e6b600\",\n \"axes\": [\n {\n \"type\": \"all\",\n \"name\": \"myAxis\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#333\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#333\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#333\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\n \"#ccc\"\n ],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\n \"rgba(250,250,250,0.3)\",\n \"rgba(200,200,200,0.3)\"\n ]\n }\n ],\n \"axisSeperateSetting\": true,\n \"toolboxColor\": \"#06467c\",\n \"toolboxEmphasisColor\": \"#4187c2\",\n \"tooltipAxisColor\": \"#cccccc\",\n \"tooltipAxisWidth\": 1,\n \"timelineLineColor\": \"#005eaa\",\n \"timelineLineWidth\": 1,\n \"timelineItemColor\": \"#005eaa\",\n \"timelineItemColorE\": \"#005eaa\",\n \"timelineCheckColor\": \"#005eaa\",\n \"timelineCheckBorderColor\": \"rgba(49,107,194,0.5)\",\n \"timelineItemBorderWidth\": 1,\n \"timelineControlColor\": \"#005eaa\",\n \"timelineControlBorderColor\": \"#005eaa\",\n \"timelineControlBorderWidth\": 0.5,\n \"timelineLabelColor\": \"#005eaa\",\n \"gridLeft\": \"10%\",\n \"gridRight\": \"10%\",\n \"gridTop\": 60,\n \"gridBottom\": 70,\n \"legendLeft\": \"center\",\n \"legendRight\": \"\",\n \"legendTop\": 0,\n \"legendBottom\": \"\"\n \n }\n }\n let interval = setInterval(() => {\n const el = this.$refs.charttpw\n if (el && typeof echarts !== \"undefined\") {\n clearInterval(interval);\n // now it is loaded, we can initialise and use it\n this.init();\n }\n }, 200);\n },\n methods: {\n init: function () {\n this.myChart = echarts.init(this.$refs.charttpw, this.etheme);\n if (!this.myChart) {\n console.error(\"echarts not initialized\");\n return;\n }\n // dummy / test data\n const labels = ['07:00', '08:00', '09:00', '10:00', '11:00', '12:00'];\n const data_temp = [15, 15.5, 16, 20, 18, 17];\n const data_rh = [55, 75, 80, 85, 70, 72];\n const title = \"\";\n const data_ppm = [800, 750, 800, 850, 610, 620];\n this.update(labels, data_temp, data_rh, data_ppm, title);\n \n },\n update: function (xAxisData, data_temp, data_rh, data_ppm, title) {\n this.myChart.setOption({\n title: {\n text: title,\n },\n tooltip: {\n show: true,\n trigger: \"axis\",\n },\n legend: {\n data: ['Temperatur', 'RH in %', 'PPM']\n }, \n grid: {\n left: \"3%\",\n right: \"4%\",\n //top: '30%',\n containLabel: true,\n },\n xAxis: {\n type: \"category\",\n boundaryGap: false,\n data: xAxisData,\n },\n yAxis: [\n {\n type: \"value\",\n name: \"Temperature\",\n min: 10,\n splitLine:{\n show:true,\n },\n axisLabel: {\n formatter: \"{value}°C\",\n },\n axisLine:{\n show:true,\n lineStyle: {\n color: this.etheme.theme.color[2],\n }\n },\n axisPointer: {\n snap: true,\n },\n },\n {\n type: \"value\",\n name: \"Humidity\",\n position: 'right',\n splitLine:{show:false,\n },\n axisLine: {\n show: true,\n },\n axisTick: {\n show: true,\n },\n min: 40,\n },\n {\n type: \"value\",\n name: \"ppm\",\n splitLine:{\n show:false,\n },\n nameGap: 15,\n nameMoveOverlap: true,\n position: 'right',\n offset: 45,\n axisLine: {\n show: true,\n lineStyle: {\n color: this.etheme.theme.color[1]\n }, \n },\n axisTick: {\n show: true,\n },\n min: 400,\n } \n ],\n series: [\n {\n name: \"Temperatur\",\n type: \"line\",\n smooth: true,\n showSymbol: true,\n data: data_temp,\n yAxisIndex: 0,\n symbolSize: 2,\n tooltip: {\n valueFormatter: '{value} °C',\n },\n lineStyle: {\n width: 1,\n }\n },\n {\n name: \"RH in %\",\n type: \"line\",\n smooth: true,\n showSymbol: true,\n symbolSize: 2,\n splitLine: {\n show: false,\n lineStyle: {\n width: 1,\n }\n },\n data: data_rh,\n yAxisIndex: 1,\n },\n {\n name: \"PPM\",\n type: \"line\",\n smooth: true,\n showSymbol: true,\n symbolSize: 2,\n data: data_ppm,\n yAxisIndex: 2,\n } \n ],\n });\n }\n }\n }\n</script>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 560,
"y": 520,
"wires": [
[]
]
},
{
"id": "459ee3e2b7fa9235",
"type": "ui-group",
"name": "Klimadaten",
"page": "b1366025f77b8dd4",
"width": 6,
"height": 1,
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "b1366025f77b8dd4",
"type": "ui-page",
"name": "Seite 1",
"ui": "6a50f35f2ffe099b",
"path": "/page1",
"icon": "home",
"layout": "grid",
"theme": "dfda5a006f3f7e59",
"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": 2,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "6a50f35f2ffe099b",
"type": "ui-base",
"name": "Mein 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": false
},
{
"id": "dfda5a006f3f7e59",
"type": "ui-theme",
"name": "Standardthema",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
},
{
"id": "f8e370b5d5d6a457",
"type": "global-config",
"env": [],
"modules": {
"@flowfuse/node-red-dashboard": "1.30.0"
}
}
]
I am also looking for a way to use the colors from the theme within my chart, but where do the line colors actually come from? I want the Y-Axis lines in the same color.
