Include graphic in custom echarts gauge widget

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:

Screenshot 2021-07-29 115246

Thx for reading, Martin

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.

2 Likes

Hi,

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

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.