[Main UI] echarts gauge and pie POC

Hey again @crnjan

Thanks for your quick answer and the easy trick. :wink:

This would be very helpful to have, yes!

Some things I recognized while fiddling around with the ECharts:

  • Line charts (and maybe other chart types) will set its own background in dark mode, instead of being transparent as in light mode - so that custom styling on the enclosing component gets hidden behind.

  • You mentioned it already, but there are some missing components & props within the inline help (like oh-chart-title, oh-chart-toolbox, oh-chart-tooltip and maybe more…)

  • Somehow connected to the above point - it’s hard to abstract the configuration of the charts from the ECharts example page to the YAML configuration in OH.

    Understanding what is a component and what is a setting took me some time and I’m still struggling on some of them…

    Example #1: Assigning a background gradient to a line-chart.

    • How would I translate this part
      new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      to usable YAML?

      See full ECharts example (linear gradient)
         areaStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                 offset: 0,
                 color: 'rgb(255, 158, 68)'
             }, {
                 offset: 1,
                 color: 'rgb(255, 70, 131)'
    • Or is it even necessary to work with these custom echart graphic classes (if this is the right term here…)?

    Example #2: Changing the timestamp-format in the tooltip.

    • I couldn’t find anything obvious about changing the tooltip-timestamp to a local format (like dd. MM yyyy) in the docs - a google search brought me to this function (which don’t work):

      Example changing timestamp in a tootltip (via google search)
        tooltip: {
         trigger: 'axis',
         formatter: function(params) {
             params = params[0];
             var chartdate = echarts.format.formatTime('dd-MM-yyyy', params.value[0]);
             var val = '<li style="list-style:none">' + params.marker +
                 params.seriesName + '&nbsp;&nbsp;' + params.value[1] + '</li>';
             return chartdate + val;
    • I could imagine that executing js functions isn’t allowed for security reasons?! Or did I miss anything here?

  • I think adding the single axis (timeline)-chart could also be helpful in the future, to achieve something like the BasicUI timeline inside the MainUI without have to fiddle something similar with f7-components:
    See → Timeline for Basic UI - #15 by Mihai_Badea

    The single axis type, looks like it would fit that use-case?!

Maybe you’ll find time give me some advice here or at least use this for future development of the implementation. :slight_smile:

Thank you!