[OH3] oh-chart gradient color on pointers

icompas · April 8, 2021, 3:36pm

Getting more experience with the oh-chart widget possibilities, I’m almost getting bold in trying things.
Currently, I’m trying to create something like a compass rose with using a gauge as graph and being fed by weather data. In this phase of development it looks like this,

Now, a classic compass needle needs to have two colors to know the actual direction is points to. Instead to make it somehow complicate with may two separate pointers and doing math, i was thinking about using gradient colors, as they are support by eCharts (Documentation - Apache ECharts).

Trying to adopt the syntax, I fail.
My pointer definition looks like this,

             pointer:
                icon: path://M128.5,2.5 L110.5,128.5 L128.5,250.5 L146.5,128.5 L128.5,2.5
                length: 150
                width: 12
                offsetCenter:
                  - 0
                  - 75
                itemStyle:
                  color:
                    type: linear
                    x: 0
                    y: 0
                    x2: 0
                    y2: 1
                    colorStops: 
                      - - 0.5
                        - "#ff3300"
                      - - 1
                        - "#ffffff"

But the effect is, that the pointer isn’t shown at all.
Anyone any idea?

ysc · April 8, 2021, 5:01pm

Looking at the docs it appears the two colorStops should be objects with offset and color properties.

So in YAML, something like:

icompas:

                    colorStops: 
                      - offset: 0.5
                        color: "#ff3300"
                      - offset: 1
                        color: "#ffffff"

icompas · April 9, 2021, 6:19am

Doing it right, works like a charm.

              pointer:
                icon: path://M128.5,2.5 L110.5,128.5 L128.5,250.5 L146.5,128.5 L128.5,2.5
                length: 150
                width: 12
                offsetCenter:
                  - 0
                  - 75
                itemStyle:
                  color:
                    type: linear
                    x: 0
                    y: 0
                    x2: 0
                    y2: 1
                    colorStops:
                      - offset: 0.5
                        color: "#ff3300"
                      - offset: 0.5
                        color: "#ffffff"

Thank you!