Step up your data visualization game with Apache ECharts

[@rembautimes8808]

I was watching a tutorial on D3 and decided to check this out. Amazing library

[@adenilsondejesussantos1597]

I am from Brazil. I really liked this video. Please, continue with this work.

[@mattjoe182]

This is the most starred repo on the Apache github.. why are not very many people talking about this? Is it mostly popular in China?

[@KirellB]

Yeah, despite it's extremely good design..

[@smeetkathiria6633]

this is a really great video, can you make a video where you go over visualizing data using python and echarts?

[@KirellB]

Just made a new video where you can use Python in your browser witch Cables. You can now bridge the 2 tutorials and code in Python and visualize using ECharts seamlessly.

[@rembautimes8808]

I’m from Malaysia , great video and I think the developers made a great job in abstracting away the complexity.

[@pythoninoffice6568]

I found this library today then found your vid... nice walkthrough! What do you think of echarts compared to plotly? I'm a plotly/dash user and I really like the callback feature in plotly since it allows users to interact with the visualization (e.g. select items from dropdown and the chart will reflect it). However, I don't think you can do callback with echarts? I saw that you can click on/off legends to hide/show certain data but is that all echarts can do in terms of interactivity? Echarts have some really awesome visualizations especially the 3D ones and some of the animation effects. I'm looking forward to using it in my next project!

[@KirellB]

Thanks for the comment! You can do callbacks on virtually anything with echarts. Check the number of events offered out of the box: echarts.apache.org/en/api.html#events You can even have different handlers for the same event depending on where you interact in the chart e.g clicking on a point or on the background of the chart or the legend. I agree with you, awesome set of charts out the box. If you combine them with the power of Cables.gl you can do next gen stuff :).

[@pythoninoffice6568]

@@KirellB thanks for responding! It seems cables is a low-code environment? The interface kinda remind me of Alteryx where there are nodes and connections etc. What would be the benefits of using such an environment vs traditional coding if I'm already more familiar with coding in eg python?

[@KirellB]

@@pythoninoffice6568 You can code your own blocks as well but can leverage more than 1500 pre made blocks. It's notoriously difficult to code WebGL shaders, Cables simplifies this for you. You can create spectacular visual pieces or interactive installations which would require several thousand lines of codes in a fraction of the time, combine this with AI APIs, audio, lasers, bluetooth, sockets etc. All of this on an url you can share and even run on your phone!! You can check my other videos for a more detailed overview.

[@pythoninoffice6568]

@@KirellB Thanks for the explanation! I'm not familiar with WebGL or JS so maybe it's not as useful for me :D. I'll check out the event handling in pyecharts!

[@cartoonfive]

I am just exploring echarts since I saw Your videos. It seems rather unclear if or how I can customize the fonts though. The library as whole looks very impressive, but custom fonts would be great for embedding with existing brand guidelines.

[@KirellB]

You can! Load the font first in HTML and then you can use it in the option object: "textStyle": { "fontFamily": "Comic Neue, cursive" # Specify Comic Neue here }

[@cartoonfive]

@@KirellB Sounds great, thanks for the hint! Filing this as a todo, there is so much to ingest and try with cables :D

[@ycombinator765]

Wow, it is exceptionally awesome, and really impressive as you said. Subbed

[@matteopz1631]

Always really cool content!

[@unpatel1]

Thank you for this great video.

[@theelitemomentum]

Hey do you know, how to remove the data label from themeRiver-basic chart

[@KirellB]

Yes, in your series object where type: "themeRiver", just add the following properties at the same level: type: 'themeRiver', itemStyle : { normal : { label : { show : false }, labelLine : { show : false } } },

[@ramakrishnamogilipuri1647]

what is Minimal Bundle and ES Modules

[@kannekantimanoj431]

hi, do you know how to add tooltip of title for piechart using echarts? thank you

[@omargasca2133]

In minute 5.50 which is the library you mentioned? vidia? sorry I couldn't understand Great vid btw

[@KirellB]

vega.github.io/vega/ :)

[@cryptolicious3738]

great video bro ! +1 sub

[@mohammadehtesham4576]

How can we implement on a webpage?

[@KirellB]

You can check my other video where I integrate Echarts and Cables :)

[@GillesBeaulacJoe]

Thank you for your video! Great job! I just started to use eCharts based on your video. I have it working good. I have integrated it in my PHP app. Problem: I need to be able to change language of display like French and Spanish. English is also needed but it is in by default. I also link to the echarts library via CDN. I know I must registerLocale and init locale, but that doesn't work. I suppose I need the langFR.ts and langES.ts files linked too. How do I do that? Thanks

[@KirellB]

In theory you should: 1) Import the locale (langFR.ts) using an import 2) Call echarts.registerLocale('FR', importedObject) 3) Use 'locale' : 'FR" in the options when creating the chart This issue could help as well: github.com/xieziyu/ngx-echarts/issues/290