Is it possible to custom visualization based on echarts?

Hello JeanPierre,

This's possible. You just need to include all of necessary JavaScript files using externalJS property of the pbiviz.json file.

After that, you will be able to use the library with TypeScript. However, you might need to find TS typings to simplify development process and get IntelliSense.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

Hi,

I haven't had the chance to dive too deep in echarts samples, though I would imagine
this could be achieved.
The big question is how...

I'd say the one key element to take into account when it comes to create ANY custom visuals
from EXISTING code,  is that you're NOT really coding some charts code which will sit in a Web page, but rather
a reusable visual component model which user will be able to manipulate for their convenience in a Power BI IDE environment.

So we all agree that it's a bit more subtle than just doing a Cut & Paste, then running pbiviz package
and expect everything to run in a snap.

Since echart is JavaScript then this shouldn't cause a problem as you should be able
to generate required both echarts and zrender libraries through npm and end up with required libraries

then later add reference to those node_modules generated files in a similar way as Ignat mentioned above.

Still in order to be recognized by Power BI, your custom visuals MUST implement the IVisual interface
at some stage. The IVisual interface acts as the main driven engine so to speak.

So from there, you'll basically have two main options:

1- Either refactor the existing code in TypeScript and manage to recreate the logic.
     I would say that not only this approach requires to be fairly comfortable with TypeScript, you must also
     be able to fully understand how and why original code was created in first place in order to be able to replicate it
     in another pattern. Remember you're not really reproducing the code "as-is" in this case but rather the logic,
     which is a bit different in this case.

2- Second option, which I believe would be more convenient in your case - would be taking existing .js code and declare it
     through a TypeScript d.ts so that Power BI will recognize it.
     This operation may still need a bit of refactoring depending on the complexity of the chart code you're reproducing.
     Then from there I imagine you would then need to define a reusable method allowing to call and load the chart
     on demand - [passing the proper parameters in signature...].
     In order to allow user to connect data, you would than also would need to define a canonical data representation
     [categorical, table,...] which you'll use through dataViewMapping and use in combination with data conversion method.
    Finally for makeup finsihing touch... define a series of objects in capabilities.json

There ain't a lot of code sample available I'm afraid, though one I used as starting ramp was similar to Jon Gallant's 3 part series approach

    http://blog.jongallant.com/2016/09/how-to-create-power-bi-custom-visual/

Code is taken from an existing d3.js library sample, though it should give you an idea how to manage each configuration steps.

If anyone has built a full working echarts sample then be my guest. Hope this helps.