Include graphic in custom echarts gauge widget

[Martin_Hilcher]

Hi,

I found the apache echarts examples and created some gauges for my custom widgets.
Now I wanted to create a widget to show and control the volume of my self made webradio.
Showing is no problem, but for controlling I wanted a plus and a minus button/icon in the widget.

I found the “graphic” element in apache echarts and I tried to use that in the widget, but that doesn’t seem to work, at least not in the way I tried to use it.

In the official documentation there is no component for graphic in a chart, but not all components are documented.

Was anybody able to do something similar to what I want to do?
I am thankful for every help I can get.

Here is an example how it should look like:

Thx for reading, Martin

[crnjan]

I’m using oh-link with position: absolute to be able to execute actions, below gauge

will display different analyse charts when taped on top (red rectangle) / bottom (green rectangle) … with positioning oh-link you can get different areas to react to different actions …

- component: f7-block
  config:
    class:
      - no-margin
  slots:
    default:
      - component: oh-link
        config:
          style:
            position: absolute
            width: 100%
            height: 50%
          action: analyzer
          actionAnalyzerItems:
            - gBasement_BoilerRoom_HP_HeatFluid_In
            - gBasement_BoilerRoom_HP_HeatFluid_Out
      - component: oh-link
        config:
          style:
            position: absolute
            width: 100%
            height: 50%
            bottom: 0
          action: analyzer
          actionAnalyzerItems:
            - gBasement_BoilerRoom_HP_ColdFluid_Out
            - gBasement_BoilerRoom_HP_ColdFluid_In
      - component: oh-chart
        config:
          height: 250px
        slots:
          series:
            - component: oh-data-series
              config:
                type: gauge
               ...

Hope this helps.

[Martin_Hilcher]

Hi,

@crnjan

I’m using oh-link with position: absolute to be able to execute actions, below gauge

thank you, that gets me further to solve my issue.
When I tried to use this in my custom widget I had no error, but also no gauge or something else, just black.
I don’t know why…

So I had another idea and that works.
I did not configure the complete oh-chart object as a component, I used my custom widget as component:

component: f7-block
slots:
  default:
    - component: oh-link
      config:
        style:
          position: absolute
          width: 100%
          height: 50%
          bottom: 0
        action: analyzer
        actionAnalyzerItems:
          - "=props.item.name"
    - component: widget:gauge_widget_mh_1
      config:
        item: =props.item
        einheit: =props.einheit
        name: =props.name
        min: =props.min
        max: =props.max
        blueZone: =props.blueZone
        greenZone: =props.greenZone
        orangeZone: =props.orangeZone
        innerScaleFarbe: =props.innerScaleFarbe
        anzSplits: =props.anzSplits

I only had to copy all props from the custom widget to the new “block” custom widget and now I can use it. The link works, too.

So thank you very much for your help,
Martin