ECharts and `formatter`

1

I’m trying to make a gauge for wind direction, I haven’t come very far, so don’t mind all that’s lacking at the moment:

The problem I’m having is that they way they solve having a gauge that goes 360° is to use a custom formatter that is a JavaScript callback, to make sure that one of the axis labels don’t overlap. If you want to make a clock for example, you don’t want 0 and 12 to be printed in the same place, the issue is the same with a compass - you don’t want 0 and 360 degrees to be printed in the same spot.

Basically, it’s done like this:

      axisLabel: {
        fontSize: 20,
        distance: 25,
        formatter: function (value) {
          if (value === 0) {
            return '';
          }
          return value + '';
        }
      }

This has been mentioned in other, now closed, topics, but I haven’t found a way to get around it, even with the “undocumented and unsupported” JavaScript workarounds. I’m no expert in exploiting loopholes in the whole YAML → JSON conversion thing, so maybe I haven’t tried the correct “hack”, but, I can’t seem to get past this.

I’m not necessarily looking for a JavaScript solution, if there are other clever way of preventing the labels from overlapping I’m happy with that too.

Any ideas?

2

I think I found a way out of this exact situation, but I think there should be a better way to do things like this in general.

      startAngle: 90,
      endAngle: -269,
      min: 0,
      max: 359,
      splitNumber: 11.966666666666
3

Cannot check/test right now but you might try out something like below, afaik I tested this in the (far) past and it worked if I remember correctly:

formatter: =v=>(v===0)?'':v+''

not sure what v+'' should do but just wanted to directly map your example (please note example above was not tested just pointing into direction you might try out).

Maybe if you share complete example it would be easier to check …

Just to mention I’m using Compass card to display wind direction and it’s css based, fyi.

1 Like
4

I think that’s a “Javascript trick” to convert a number to a string. By concatenating the (numeric) value with an empty string, you force the result to be a string as well.

5

Thanks a lot - that actually works :+1:

1 Like