Incubator-echarts: endAngle support for pie chart

Created on 25 Oct 2016  ·  3Comments  ·  Source: apache/incubator-echarts

Version: 3.2.3

Would be great if pie chart has endAngle proproty, similar to the gauge chart. I'm trying to achieve this:

image

Where what I seem to be able to achieve with pie chart is:
image

Also, I wonder whether this could be actually rendered as a bar chart with "polar" coordinate system. I haven't seen this type supported in the doc so haven't tried. This would potentially allow to render things like this one?

image

enhancement stale

Most helpful comment

@jarben Just recently, I was looking for a similar option. I wanted to use the endAngle on a polar bar chart to achieve the exact same look. I solved it in a hacky sort of way, by leveraging echarts.registerProcessor and re-setting the axis extent. I'm not really sure that it is officially supported, so I'll let @pissang and @Ovilia and @100pah chip in.

echarts.registerProcessor(ecModel => {
  if (ecModel.getComponent('polar')) {
    ecModel
      .getComponent('polar')
      .coordinateSystem.getAxis('angle')
      .setExtent(90, -180);
  }
});

Here's a working example.
https://codepen.io/psumstr/pen/VQdNXy?editors=1010

I've used registerProcessor in the past to get some things like bandWidth of heat map to dynamically show or hide labels.

All 3 comments

@jarben Just recently, I was looking for a similar option. I wanted to use the endAngle on a polar bar chart to achieve the exact same look. I solved it in a hacky sort of way, by leveraging echarts.registerProcessor and re-setting the axis extent. I'm not really sure that it is officially supported, so I'll let @pissang and @Ovilia and @100pah chip in.

echarts.registerProcessor(ecModel => {
  if (ecModel.getComponent('polar')) {
    ecModel
      .getComponent('polar')
      .coordinateSystem.getAxis('angle')
      .setExtent(90, -180);
  }
});

Here's a working example.
https://codepen.io/psumstr/pen/VQdNXy?editors=1010

I've used registerProcessor in the past to get some things like bandWidth of heat map to dynamically show or hide labels.

Awesome, thanks so much for the example @jonavila ! Didn't know about registerProcessor - I'm sure I'll find a lot use of that! Again - thanks for your solution & example..

@jarben Just recently, I was looking for a similar option. I wanted to use the endAngle on a polar bar chart to achieve the exact same look. I solved it in a hacky sort of way, by leveraging echarts.registerProcessor and re-setting the axis extent. I'm not really sure that it is officially supported, so I'll let @pissang and @Ovilia and @100pah chip in.

echarts.registerProcessor(ecModel => {
  if (ecModel.getComponent('polar')) {
    ecModel
      .getComponent('polar')
      .coordinateSystem.getAxis('angle')
      .setExtent(90, -180);
  }
});

Here's a working example.
https://codepen.io/psumstr/pen/VQdNXy?editors=1010

I've used _registerProcessor_ in the past to get some things like bandWidth of heat map to dynamically show or hide labels.

This solution dont work in Echarts version 4.0.2+ :|
I dont know WHY? How we can do it in Version 4.6.0 ?

Was this page helpful?
0 / 5 - 0 ratings