Hello, I am Xiao Wu 🧐
A couple of days ago, I posted an article titled “Creating large visual screens with Python is So easy!” , the comment area is very popular, found that everyone is very interested in the visual part.
And just the part of large screen visualization is not too detailed, today I will talk about Pyecharts making visual large screen in detail.
Note that due to the length of this article, not all of the code will be available for download at the end of the article.
Creating large Visual screens in Python is So easy! Data crawling and data preprocessing are not mentioned.
ECharts is an open source js-based commercial data chart library from Baidu. There are many ready-made chart types and examples, and Pyecharts is to facilitate us to use Python to achieve ECharts plotting. Creating a large visual screen with Pyecharts can be divided into two steps:
1. Use Pyecharts to make various graphics;
2. Use Pyecharts’ Composite chart function to splice all images into one HTML file for display.
Xiao Wu believes that the two most important factors affecting the appearance of large screen are: color matching and layout! In this article, both will be emphasized.
Pyecharts visualization
This paper reduces the chart and only selects the gold medal distribution map of each country in the 2020 Tokyo Olympic Games, the details of the medal tally of the 2020 Tokyo Olympic Games, and the details of China’s awards of each event in the 2020 Tokyo Olympic Games.
These diagrams are simple enough to learn by copying examples directly from the official documentation. Use the Pyecharts default color for all chart colors. try to create your own style when using it.
Map the world
Pyecharts must draw world maps in English. Therefore, we introduced the Chinese-English comparison table of country names in the previous paper, and the left link formed DF4:
Separate extract English name and medal total two columns of data for visualization.
data_list=[[i,j] for i,j in zip(df4['English name'],df4['Total MEDALS'])]
data_list[:5]
Copy the code
With the data ready, start mapping the world using Pyecharts.
from pyecharts import options as opts
from pyecharts.charts import Map
c = (
Map()
.add("", data_list, "world",
is_map_symbol_show=False,
)
.set_series_opts(label_opts=opts.LabelOpts(is_show=False))
.set_global_opts(
title_opts=opts.TitleOpts(title=Gold Medal Distribution for 2020 Tokyo Olympic Games),
visualmap_opts=opts.VisualMapOpts(max_=100)
)
)
c.render_notebook()
Copy the codeVery simple
Similarly, draw the other two types of graphs in turn.
Bar chart, pie chart
Bar chart
from pyecharts import options as opts
from pyecharts.charts import Bar
c = (
Bar()
.add_xaxis(df4['name'].head(25).tolist())
.add_yaxis("Gold medal", df4['gold'].head(25).tolist(), stack="stack1")
.add_yaxis("Silver", df4['silver'].head(25).tolist(), stack="stack1")
.add_yaxis("Bronze", df4['bronze'].head(25).tolist(), stack="stack1")
.set_series_opts(label_opts=opts.LabelOpts(is_show=True, position="inside", font_size=12, color='#FFFFFF'))
.set_global_opts(title_opts=opts.TitleOpts(title="Tokyo 2020 Medal tally details"),
xaxis_opts=opts.AxisOpts(type_='category',
axislabel_opts=opts.LabelOpts(
rotate=45),
)))
c.render_notebook()
Copy the code
Pie chart
from pyecharts import options as opts
from pyecharts.charts import Pie
c = (
Pie()
.add(""The [['the diving'.12], ['shoot'.11], ['weight'.8], ['Competitive gymnastics'.8], [Table tennis.7], ['swimming'.6], ['badminton'.6], ['track'.5], ['Still water Kayaking'.3], ['Trampoline Gymnastics'.3], ['Freestyle wrestling'.3], ['boat'.3], ['Karate'.2], ['boxing'.2], ['boat'.2], ['Synchronized Swimming'.2], ['Taekwondo'.1], ['Track cycling'.1], ['Greco-Roman wrestling'.1], ['fencing'.1], ['Three-man basketball'.1]],
center=["50%"."60%"],)
.set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
)
c.render_notebook()
Copy the code
So you have the three charts that you need.
Pyecharts composite chart
The second step of Pyecharts is to combine diagrams, which can be roughly divided into four categories:
- Grid: Parallel multigraph
- Page: Sequential multigraph
- Tab: Tab multi-graph
- Timeline: Shows multiple images in a Timeline
Official documentation: pyecharts.org/#/zh-cn/com…
Page (sequential multiple graph) is used mostly here, and the previous charting code should be changed to a function before the chart can be combined.
def map_world() -> Map:
c = (
Map(init_opts=opts.InitOpts(chart_id=2, bg_color='#ADD8E6'))
.add("", data_list, "world",
is_map_symbol_show=False,
)
.set_series_opts(label_opts=opts.LabelOpts(is_show=False))
.set_global_opts(
title_opts=opts.TitleOpts(title=Gold Medal Distribution for 2020 Tokyo Olympic Games),
visualmap_opts=opts.VisualMapOpts(max_=100)))return c
Copy the codeThe background color bg_color and chart IDchart_id are also added, which is used to distinguish between multiple charts. For the background color, I chose light blue #ADD8E6. The layout of the subsequent images is based on the mapping of chart ids, so each chart has its own ID.
Then use Page = Page(Page = DraggablePageLayout) mode to display the image. This step is to adjust the layout.
page = Page(layout=Page.DraggablePageLayout, page_title="Tokyo 2020 Olympic Medal tally")
# Add charts to the page
page.add(
title(),
map_world(),
bar_medals(),
pie_china(),)
page.render('test.html')
Copy the codeA test.html file is generated after the draw function is called.
After opening, you can drag and drop pictures to achieve a custom layout.
After you have laid out the image, remember to save the layout file by clicking “Save Config” in the upper left corner.
When clicked, a local chart_config.json file is generated that contains the layout location for each chart ID.
Finally, the saved layout file is called to regenerate the HTML.
Run the following line.
page.save_resize_html('test.html', cfg_file='chart_config.json', dest='Olympics. HTML')
Copy the codeJson for the downloaded layout file, olympic.html for the layout file, open meter Olympic.html:
This is a data visualization — a big screen display.
But there are still a lot of shortcomings, such as if the chart color is not specially adjusted.
The whole screen is just a static display, not a data dashboard with a business scene.
Real data screens tend to be generated by BI software, which can realize cross-screening between graphs, tables and slicers. I hope to use Python to make them in the future.
The code download
If you are interested in the code of this article, scan the code 👇 to follow the “learn Python” background reply “big screen”, you can get all the code!
