Article Directory
pyecharts gallery website: https://gallery.pyecharts.org/#/
- Check out the official example at this site
1. pyecharts draws a timeline histogram
1. Introduction to Timeline
The timeline in the pyecharts timeline histogram is a time axis parallel to the x-axis;
The timeline class is Timeline, which is defined in the pyecharts.charts module;
Each point on the timeline represents a time point,
Provides a histogram for each time point on the timeline,
When the timeline starts to play, as the timeline advances to different points, the histogram corresponding to that point will be displayed;
The essence of the timeline histogram is to switch between different histogram charts at different time points;
2. Key points of timeline histogram development
First, import the Timeline timeline package and the Bar histogram package, both of which are defined in the pyecharts.charts module;
# 导入柱状图核心类
from pyecharts.charts import Bar, Timeline
Then, to define the data, the data can be defined in a dictionary. The identification of the x-axis only needs to be defined once, and then a list can be defined for the y-axis data at each time point, and the list container data is generated using random numbers, and the range is between 1000 and 10000;
# 定义数据
data = {
'x': ['美国', '中国', '日本'],
'2020': [randint(1000, 10000) for _ in range(7)],
'2030': [randint(1000, 10000) for _ in range(7)],
'2040': [randint(1000, 10000) for _ in range(7)]
}
Then, generate a Bar histogram for each time point on the timeline, and then set the Bar instance object to the Timeline instance object;
# 为每个时间线中的时间点创建柱状图
bar_2020 = Bar()
bar_2020.add_xaxis(data['x'])
bar_2020.add_yaxis("GDP", data['2020'])
bar_2020.reversal_axis()
bar_2030 = Bar()
bar_2030.add_xaxis(data['x'])
bar_2030.add_yaxis("GDP", data['2030'])
bar_2030.reversal_axis()
bar_2040 = Bar()
bar_2040.add_xaxis(data['x'])
bar_2040.add_yaxis("GDP", data['2040'])
bar_2040.reversal_axis()
Then, create a Timeline instance object, set different Bar histogram instance objects for different time points, the second parameter is the name of the time point, and the first parameter is the Bar histogram instance object;
# 创建时间线柱状图
timeline = Timeline()
timeline.add(bar_2020, "2020 年 GDP 排名")
timeline.add(bar_2030, "2030 年 GDP 排名")
timeline.add(bar_2040, "2040 年 GDP 排名")
Finally, call the Timeline#render function to generate a timeline histogram chart; the render function can pass in a string parameter, which can be used as the name of the generated web page;
# 将图表保存到本地
timeline.render("时间线柱状图.html")
3. Code example - Timeline histogram
Code example:
"""
pyecharts 时间线柱状图 代码示例
"""
# 导入产生随机数工具类
from random import randint
# 导入柱状图核心类
from pyecharts.charts import Bar, Timeline
# 定义数据
data = {
'x': ['美国', '中国', '日本'],
'2020': [randint(1000, 10000) for _ in range(7)],
'2030': [randint(1000, 10000) for _ in range(7)],
'2040': [randint(1000, 10000) for _ in range(7)]
}
# 为每个时间线中的时间点创建柱状图
bar_2020 = Bar()
bar_2020.add_xaxis(data['x'])
bar_2020.add_yaxis("GDP", data['2020'])
bar_2020.reversal_axis()
bar_2030 = Bar()
bar_2030.add_xaxis(data['x'])
bar_2030.add_yaxis("GDP", data['2030'])
bar_2030.reversal_axis()
bar_2040 = Bar()
bar_2040.add_xaxis(data['x'])
bar_2040.add_yaxis("GDP", data['2040'])
bar_2040.reversal_axis()
# 创建时间线柱状图
timeline = Timeline()
timeline.add(bar_2020, "2020 年 GDP 排名")
timeline.add(bar_2030, "2030 年 GDP 排名")
timeline.add(bar_2040, "2040 年 GDP 排名")
# 将图表保存到本地
timeline.render("时间线柱状图.html")
Execution result: after execution, a "timeline histogram.html" webpage is generated, and the webpage is viewed with the Chrome browser;
The content of the webpage is as follows (for reference only):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
</head>
<body >
<div id="7c11d418d95d447488d6009f99f64bf3" class="chart-container" style="width:900px; height:500px; "></div>
<script>
var chart_7c11d418d95d447488d6009f99f64bf3 = echarts.init(
document.getElementById('7c11d418d95d447488d6009f99f64bf3'), 'white', {
renderer: 'canvas'});
var option_7c11d418d95d447488d6009f99f64bf3 = {
"baseOption": {
"series": [
{
"type": "bar",
"name": "GDP",
"legendHoverLink": true,
"data": [
6958,
3301,
1993,
1401,
5696,
4703,
6844
],
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
}
],
"timeline": {
"axisType": "category",
"currentIndex": 0,
"orient": "horizontal",
"autoPlay": false,
"controlPosition": "left",
"loop": true,
"rewind": false,
"show": true,
"inverse": false,
"bottom": "-5px",
"progress": {
},
"data": [
"2020 \u5e74 GDP \u6392\u540d",
"2030 \u5e74 GDP \u6392\u540d",
"2040 \u5e74 GDP \u6392\u540d"
]
},
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"yAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u7f8e\u56fd",
"\u4e2d\u56fd",
"\u65e5\u672c",
"\u5fb7\u56fd",
"\u82f1\u56fd",
"\u6cd5\u56fd",
"\u52a0\u62ff\u5927"
]
}
],
"legend": [
{
"data": [
"GDP"
],
"selected": {
}
}
]
},
"options": [
{
"series": [
{
"type": "bar",
"name": "GDP",
"legendHoverLink": true,
"data": [
8031,
7856,
3541,
7392,
2628,
4117,
5979
],
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
}
],
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"yAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u7f8e\u56fd",
"\u4e2d\u56fd",
"\u65e5\u672c",
"\u5fb7\u56fd",
"\u82f1\u56fd",
"\u6cd5\u56fd",
"\u52a0\u62ff\u5927"
]
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
},
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
]
},
{
"series": [
{
"type": "bar",
"name": "GDP",
"legendHoverLink": true,
"data": [
1018,
8874,
7545,
9780,
8622,
5800,
5960
],
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
}
],
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"yAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u7f8e\u56fd",
"\u4e2d\u56fd",
"\u65e5\u672c",
"\u5fb7\u56fd",
"\u82f1\u56fd",
"\u6cd5\u56fd",
"\u52a0\u62ff\u5927"
]
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
},
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
]
},
{
"series": [
{
"type": "bar",
"name": "GDP",
"legendHoverLink": true,
"data": [
6958,
3301,
1993,
1401,
5696,
4703,
6844
],
"realtimeSort": false,
"showBackground": false,
"stackStrategy": "samesign",
"cursor": "pointer",
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"margin": 8
}
}
],
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"yAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u7f8e\u56fd",
"\u4e2d\u56fd",
"\u65e5\u672c",
"\u5fb7\u56fd",
"\u82f1\u56fd",
"\u6cd5\u56fd",
"\u52a0\u62ff\u5927"
]
}
],
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"enterable": false,
"confine": false,
"appendToBody": false,
"transitionDuration": 0.4,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5,
"order": "seriesAsc"
},
"color": [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
]
}
]
};
chart_7c11d418d95d447488d6009f99f64bf3.setOption(option_7c11d418d95d447488d6009f99f64bf3);
</script>
</body>
</html>
The initial state is as follows, the time point is in 2020, and the GDP at that time point is displayed;
Click the mouse on 2030 to get the following effect;
Click the mouse on 2040 to get the following effect:
Click the play button on the left side of the timeline to automatically play the histogram according to the timeline;
2. Other settings of pyecharts drawing timeline histogram
1. Timeline Playback Settings
Call the Timeline#add_schema function to set the autoplay settings of the timeline;
Set parameters using keywords,
The play_interval keyword parameter sets the playback interval, in milliseconds, in the following code, a time point is switched every 1 second;
play_interval=1000, # 自动播放间隔, 单位毫秒, 每隔 1 秒切换一个时间点
The is_timeline_show keyword parameter sets whether to show the timeline during autoplay;
is_timeline_show=True, # 自动播放时是否显示时间线
is_auto_play keyword parameter setting whether to play automatically,
is_auto_play=True, # 是否自动播放
The is_loop_play keyword parameter sets whether to play in a loop;
is_loop_play=True # 是否循环播放
Complete code :
# 时间线 自动播放设置
timeline.add_schema(
play_interval=1000, # 自动播放间隔, 单位毫秒, 每隔 1 秒切换一个时间点
is_timeline_show=True, # 自动播放时是否显示时间线
is_auto_play=True, # 是否自动播放
is_loop_play=True # 是否循环播放
)
2. Timeline Timeline theme setting
Before setting the theme, you need to import the ThemeType class, which is defined in the pyecharts.globals module;
# 导入主题
from pyecharts.globals import ThemeType
When creating a timeline, you can pass in the dictionary data as a parameter in the constructor, and the following code can set the Timeline theme of the timeline;
Set the theme of red, yellow and warm colors;
# 创建时间线柱状图
timeline = Timeline({
"theme": ThemeType.ESSOS})
The effect is as follows:
Common themes are as follows −
class _ThemeType:
BUILTIN_THEMES = ["light", "dark", "white"]
LIGHT = "light" # 红蓝粉 高亮颜色
DARK = "dark" # 红蓝 黑色背景
WHITE = "white" # 红蓝 默认颜色 与 Bar 相同
CHALK: str = "chalk" # 红蓝绿 黑色背景
ESSOS: str = "essos" # 红黄 暖色系
INFOGRAPHIC: str = "infographic" # 红蓝黄 偏亮
MACARONS: str = "macarons" # 紫绿
PURPLE_PASSION: str = "purple-passion" # 粉紫
ROMA: str = "roma" # 红黑灰
ROMANTIC: str = "romantic" # 红粉蓝
SHINE: str = "shine"
VINTAGE: str = "vintage"
WALDEN: str = "walden"
WESTEROS: str = "westeros"
WONDERLAND: str = "wonderland"
HALLOWEEN: str = "halloween"
3. Code example - special timeline settings
Code example:
"""
pyecharts 时间线柱状图 代码示例
"""
# 导入产生随机数工具类
from random import randint
# 导入柱状图核心类
from pyecharts.charts import Bar, Timeline
# 导入主题
from pyecharts.globals import ThemeType
# 定义数据
data = {
'x': ['美国', '中国', '日本'],
'2020': [randint(1000, 10000) for _ in range(7)],
'2030': [randint(1000, 10000) for _ in range(7)],
'2040': [randint(1000, 10000) for _ in range(7)]
}
# 为每个时间线中的时间点创建柱状图
bar_2020 = Bar()
bar_2020.add_xaxis(data['x'])
bar_2020.add_yaxis("GDP", data['2020'])
bar_2020.reversal_axis()
bar_2030 = Bar()
bar_2030.add_xaxis(data['x'])
bar_2030.add_yaxis("GDP", data['2030'])
bar_2030.reversal_axis()
bar_2040 = Bar()
bar_2040.add_xaxis(data['x'])
bar_2040.add_yaxis("GDP", data['2040'])
bar_2040.reversal_axis()
# 创建时间线柱状图
timeline = Timeline({
"theme": ThemeType.ESSOS})
timeline.add(bar_2020, "2020 年 GDP 排名")
timeline.add(bar_2030, "2030 年 GDP 排名")
timeline.add(bar_2040, "2040 年 GDP 排名")
# 时间线 自动播放设置
timeline.add_schema(
play_interval=1000, # 自动播放间隔, 单位毫秒, 每隔 1 秒切换一个时间点
is_timeline_show=True, # 自动播放时是否显示时间线
is_auto_play=True, # 是否自动播放
is_loop_play=True # 是否循环播放
)
# 将图表保存到本地
timeline.render("时间线柱状图.html")
Execution result: After execution, a "timeline histogram.html" web page file is generated;
Open the web page file, the effect is as follows: after opening, the timeline will play automatically;
