This article is suitable for those who are new to learning overlap, grid, tab< /strong>The superficial use of the three combined graphics (ps: If the writing is not good, please ignore it, please do not reprimand)
Thinking:
overlap component, combined component grid and paging component tab are all composite components, which require more than two graphs, so prepare two different ones first Graph (the growth rate graph and column graph are used in the example), and then select the desired data according to your own data, and load the graph with these three components.
Directory
Ideas:
The overlap component, the combined component grid and the pagination component tab are all composite components, which require more than two graphs, so prepare two different graphs first (the growth rate graph and the column graph are used in the example), and then select according to your own data To output the desired data, load the graph with these three components.
The first thing to do is data preprocessing, processing the data to be used into the data you need and the key pycharts library and pandas library, loading the data to extract the date and arbitrary data you need (ps: the date is selected here and bread)
Prepare two forms in advance
1. Growth rate
Then add data Add the data to be used for the x-axis in .add–xaxis(), and add effects and text prompts such as the title and the attributes you want to build in .add_yaxis()
2. Column chart
ps: You can choose the color you want to use color=? ? ? and the spacing between columns category_gap=? ? ?
overlap component
The overlapping component overlap can simultaneously display multiple graphs with the same x-axis but different y-axis in a coordinate system.
1. Call the overlap component (method) to achieve cascading
ps: use bar.overlap(line) to call the overlap component (method) to achieve cascading
Use markline_opts=opts.MarkLineOpts() to mark the 0 scale line of the secondary y-axis to highlight the positive and negative attributes of the growth rate
2. Overlap composite image effect:
Composite component grid
The composite component grid is similar to being able to insert multiple graphics on a drawing space.
1. Grid code demo
ps: The grid attributes pos_bottom and pos_top here are the codes for setting the positions of the two graphics
2. Grid operation effect:
Paging component tab
The paging component tab can realize the switching display of multiple graphics
1. Tab code demo
ps: At the end of the code, use tab = Tab() to create the object of the paging combination chart
2. Tab operation effect:
Summary: Overlap, grud, and tab can easily make some complicated data clear at a glance, allowing people to better see the curve of the data
for example:
The first thing to do is data preprocessing, processing the data to be used into the data you need and the key pycharts library and pandas library, loading the data to extract the date and any data you need data (ps: date and bread are selected here)
Prepare two forms in advance
Build two different graphs, such as a growth rate and a histogram
1. Growth rate
# Construct growth rate data
rate_of_rise = []
for i in range(len(data)):
if i==0:
rate_of_rise.append(0)
else:
rate = dist[i]/dist[i-1]-1 # calculate growth rate
rate_of_rise.append((round(rate,3))) # keep 3 digits after the decimal point, add to the list
rate_of_rise
c = (
Line()
.add_xaxis(xaxis_data=x)
.add_yaxis(
series_name="Bread sales daily growth rate line chart",
y_axis=rate_of_rise,
symbol="garden",
symbol_size=1,
itemstyle_opts=opts.ItemStyleOpts(border_width=3, border_color="red", color="purple"), # set the style of the point
linestyle_opts=opts.LineStyleOpts(color="purple", width=4, type_="dashed"), # Set the style of the line
label_opts=opts.LabelOpts(is_show=True),
)
)
c.render_notebook()
ps: First build the growth rate data. You can choose to keep the number of decimal places after the growth rate when calculating the growth rate. Here, you choose the last three digits. You can keep them according to your own wishes (if you want to build a growth rate)
Then add data Add the data to be used for the x-axis in .add–xaxis(), and add effects and text prompts such as the title and the attributes you want to build in .add_yaxis()
Running effect 1:
2. Column chart
from pyecharts import options as opts
from pyecharts.charts import Bar
x = [i for i in dist. index]
y = dist.tolist()
c = (
bar()
.add_xaxis(x)
.add_yaxis("bread", y,
category_gap=5,
color='#8A2BE2')
.set_global_opts(title_opts=opts.TitleOpts(title="Bread Sales Column Chart"))
)
c.render_notebook()
ps: You can choose what you want to use The color of color=? ? ? and the spacing between columns category_gap=? ? ?
title is the title. Of course, the color title and so on here will not affect the subsequent composite graphics
Can be adjusted in the compound graphics below
Running effect 2:
overlap component
The stacked component overlap can be realized in one coordinate Simultaneously display multiple graphs with the same x-axis but different y-axes in the system.
1. Call the overlap component (method) to achieve cascading
x = [i for i in dist. index]
y = dist.tolist()
bar = (
bar()
.add_xaxis(x)
.add_yaxis("Bread", y,
color = '#FF83FA')
.extend_axis( #Add minor axis
yaxis=opts.AxisOpts(name='growth rate',min_=-3) # Configure the secondary axis
)
.set_global_opts(
title_opts=opts.TitleOpts(title="Data growth rate column, line composite chart"),
yaxis_opts=opts.AxisOpts( # configure the main axis
name='value',
max_=250
),
)
)
line = (
Line()
.add_xaxis(x)
.add_yaxis("Growth rate",
rate_of_rise,
is_smooth = True,
yaxis_index=1,
linestyle_opts = opts.LineStyleOpts(color='blue',
width=3,
type_ = 'dashed'
),
)
.set_series_opts(
markline_opts = opts.MarkLineOpts(
data=[
{"yAxis": 0},
],
label_opts=opts.LabelOpts(is_show=True),
linestyle_opts = opts.LineStyleOpts(color='green',
width=3,
type_ = 'dotted',
),
)
)
)
bar. overlap(line)
bar.render_notebook()
ps: Use bar.overlap(line) to call the overlap component (method) to achieve Cascading
Use markline_opts=opts.MarkLineOpts() to mark the 0-scale line of the sub-y-axis to highlight the growth rate Positive and negative attributes
2. Overlap composite image effect:
Composite component grid
The combined component grid is similar to being able to insert multiple graphics in a drawing space.
1. Grid code demo
bar = (
bar()
.add_xaxis(x)
.add_yaxis("Bread", y,
color = '#FF83FA',)
.set_global_opts(title_opts=opts.TitleOpts(title="Grid-Bar Milk Sales"))
)
line = (
Line()
.add_xaxis(x)
.add_yaxis("Bread", y,
color = '#F08080')
.set_global_opts(
title_opts=opts.TitleOpts(title="Grid-Line", pos_top="48%"),
legend_opts=opts.LegendOpts(pos_top="48%"),
)
)
grid = (
Grid()
.add(bar, grid_opts=opts.GridOpts(pos_bottom="60%"))
.add(line, grid_opts=opts.GridOpts(pos_top="60%"))
# .add(bar, grid_opts=opts.GridOpts(pos_left="55%"))
# .add(line, grid_opts=opts.GridOpts(pos_right="55%"))
)
grid.render_notebook()
ps: The grid attributes pos_bottom and pos_top here are for setting the two graphics Location code
2, grid running effect:
Paging component tab
The paging component tab can realize the switching display of multiple graphics
1. Tab code demo
bar = (
bar()
.add_xaxis(x)
.add_yaxis("Bread", y,
color = '#FF83FA',
)
.set_global_opts(
title_opts=opts.TitleOpts(title="Data growth rate column, line composite chart"),
)
)
line = (
Line()
.add_xaxis(x)
.add_yaxis("Growth rate",
rate_of_rise,
is_smooth = True,
color = '#FF83FA',
linestyle_opts = opts.LineStyleOpts(color='#FF83FA',
width=3,
type_ = 'dashed',
),
)
)
tab = Tab() # Create a paging combination chart object
tab.add(bar, "bar chart")
tab.add(line, "line chart")
tab.render_notebook()
ps: at the end of the code, use tab = Tab () to create the page combination Graph object
Add the name of the table with tab.add
bar and line are graphic properties set in advance
2, tab running effect:
column chart
line chart
That is, click which picture can display which picture, if you want to make many pictures, you can also superimpose them in the code