Step up your data visualization game with Apache ECharts

Подписаться 2,2 тыс.

Просмотров 27 тыс.

50% 1

In this video, I present a very powerful data viz library with hundreds of charts that you can use in our projects for free: Apache ECharts.
echarts.apache.org/en/index.html
It's extremely popular in Asia but less known in the Western world even though the design and performance is amazing.
► Sign up to my data art newsletter: eepurl.com/dxfXbT
► Subscribe to “Kirell Benzi” on RU-vid ☝️
Visit my website:
www.kirellbenzi.com
Follow me on social media:
/ kirellbenzi
/ kirellbenzi
/ kirellb
/ kirell.benzi
Do you have a question about data visualization or data art? Drop it in the comments below or tag me on Twitter with @kirellbenzi
#data #dataviz #datavisualization #dataart #design #science #engineering #research #dashboard #apache #opensource

Наука

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@adenilsondejesussantos1597 3 года назад

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

@rembautimes8808 2 года назад

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

@ycombinator765 Год назад

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

@matteopz1631 2 года назад

Always really cool content!

@rembautimes8808 2 года назад

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

@unpatel1 Год назад

Thank you for this great video.

@cryptolicious3738 2 года назад

great video bro ! +1 sub

@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 3 года назад

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

@KirellB 2 года назад

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.

@pythoninoffice6568 2 года назад

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 2 года назад

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 2 года назад

@@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 2 года назад

@@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 2 года назад

@@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!

@kannekantimanoj431 2 года назад

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

@jmdoeswhy Год назад

What icon library do these echarts use?

@omargasca2133 2 года назад

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

@KirellB 2 года назад

vega.github.io/vega/ :)

@ramakrishnamogilipuri1647 3 года назад

what is Minimal Bundle and ES Modules

@adarshgupta6680 2 года назад

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

@KirellB 2 года назад

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 } } },

@mohammadehtesham4576 2 года назад

How can we implement on a webpage?

@KirellB 2 года назад

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

@GillesBeaulacJoe 2 года назад

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 2 года назад

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