Echarts as charting platform?

As noted in #754, charting looms as an area that will require significant working moving to Angular. The current charting tools are dc, plottable and a variety of “wrapper” components around these libraries.

ngx-charts is one possible native library for Angular, but not available on AngularJS.

echarts presents as another option :

This is an extensive javascript library that is “declarative” in the sense that configurations of the chart are defined in an “option” javascript object. ie almost everything you want to do in the chart is handled by creating the relevant option object, then calling

echart.setOption(option);

The option object therefore needs to support everything you want it to do; this is a very different philosophy from plottable, which allows you to compose abstractions that are not very far removed from d3. echarts is closer to plotly in that respect.

Impressions though after playing with this for a week:

the options do indeed cater for everything we are likely to need;
there are a vast number of chart types supported (https://echarts.apache.org/examples/en/index.html)
includes a workable interface to leaflet - see https://medium.com/@Ovilia/making-a-covid-19-map-with-echarts-and-leaflet-30fdcd8739c6
community is large and documentation is extensive , project is active - seems to be a minor release monthly (4.7.0 18 March 2020)
licence is Apache 2 - so no limitations on use in our project?
There is not a “paid” version ( cf plotly) so everything is available to the non-paying user.

We could use this now in angularjs, which would greatly simplify the transition to Angular.

Things to beware of:

Interestingly, a configuration option is to choose the rendering to canvas or svg. They appear identical. However the svg doesn't provide much benefit, there is no grouping or classes applied, or ability to add your own attributes; so you don't really get much benefit from svg e.g. you can't do anything with css.

Project as been around for 10 years - originated in China with baidu, and lead developers seem to come from the big chinese IT companies Wechat, Tencent, baidu…. Probably 50% of github issues are in chinese - google translate seems to work ok. Now auspiced by apache.org and repo is on github. https://github.com/apache/incubator-echarts

A bit annoying that the series are not instantiated directly from the data - you have to create each series object you need. See documentation.

Canvas rendering come with an export to an image file, which may be a nice convenience.

Doesn't use d3. Potentially we could eliminate d3, dc and plottable libraries in Angular implementation.

echart offers some parallel techniques for managing e.g. 'object constancy', scales, axis configuration, simple ( but meaningful) animation. see fiddle here: http://jsfiddle.net/softwords/0h83jbdc/6/

Could consider using echarts/leaflet in place of google maps - ie placing objects on a map becomes effectively and x y chart where x=lng y = lat and the leaflet tiles are synchronised.

‌

Comments (1)