在作图过程中我们需要对散点图、折线图、柱状图等进行添加注释,使之能展现更多的信息,如下图:
想要进行上图添加信息需要提前了解pyecharts中JsCode的运用,
建议参考该链接知乎大神解释
还应该掌握pyecharts中的tooltip,官网有,但是写的并不全,pyecharts官网解释
此链接中,tooltip放在了全局配置项中,但是在我的实际应用中,有时需要两个折线显示不同的提示框信息,所有没办法用一种规格去配置两个曲线,因此我尝试放在了添加y轴信息add_yaxis中,也能正常运行。也可以通过set_series_opts进行配置,具体方法我也不详细解释,大家自行学习吧0.0
具体应该如何编程,有两种方法。
一、适用于散点图和柱状图(折线图不适用)
在处理数据时,x轴数据正常使用,y轴数据需要做成多个列表组成的列表,例如
[[],[],[],[],[],...,[]]
而每一个子列表的索引0位置为y轴画图数据,所需要补充其他信息便可以放在其他位置,在作图时通过
formatter=JsCode(
"""
function(params) {
return
'总量: ' + params.data[1] +
'<br>汉堡: ' + params.data[2] +
'<br>翅中: ' + params.data[3]+
'<br>薯条: ' + params.data[4] +
'<br>可乐: ' + params.data[5] +
'<br>鸡腿: ' + params.data[6] +
'<br>披萨: ' + params.data[7] ;
}
"""
)
params.data中索引0,1 位置表示作图的x,y轴数据,从索引2开始便是我们列表y中的其他信息,通过配置tooltip_opts=opts.TooltipOpt()的信息便可以进行显示。
二、适用于所有基本图形
在处理数据时,x轴和y轴数据正常使用,单独列出一个列表存放额外信息(该列表长度应与作图数据长度一致)
通过在formatter=JsCode()引用该列表,代码如下:
formatter=JsCode(
"""
function(params) {
var z = """ + str(biaoqian_date) + """;
var index = params.dataIndex;
return
'总量: ' + params.data[1] +
'<br>汉堡: ' + z[index][3] +
'<br>翅中: ' + z[index][0]+
'<br>薯条: ' + z[index][1] +
'<br>可乐: ' + z[index][2] +
'<br>鸡腿: ' + z[index][4] +
'<br>披萨: ' + z[index][5];
}
"""
)
在JsCode中引用需要用到的列表,并进行return显示,详细折线图代码如下:
生成的是一个网页(.html文件),存放在.py文件的目录下。
import random
from pyecharts import options as opts
from pyecharts.charts import Line
from pyecharts.commons.utils import JsCode
#模拟数据
def get_x_y_date():
date_x = []
date_y = []
biaoqian_date = []
for i in range(0, 10):
temp = []
sum = 0
temp.append(random.randint(2, 10))
temp.append(random.randint(2, 10))
temp.append(random.randint(2, 15))
temp.append(random.randint(2, 15))
temp.append(random.randint(2, 15))
temp.append(random.randint(2, 15))
temp.append(random.randint(2, 15))
for j in temp:
sum = sum + j
biaoqian_date.append(temp)
date_x.append(i)
date_y.append(sum)
return date_x, date_y, biaoqian_date
# 调用此函数
def guandaomaishen_paint():
date_x, date_y ,biaoqian_date= get_x_y_date()
l = Line()
# 添加横轴
l.add_xaxis(date_x)
# 添加纵轴
l.add_yaxis(series_name='总销售量',
y_axis=date_y,
color='#4b0101', # '#4b0101'
label_opts=opts.LabelOpts(
is_show=False, ),
# 线配置
linestyle_opts=opts.LineStyleOpts(
width=1.2,
color='#4b0101'),
tooltip_opts=opts.TooltipOpts(is_show=True, trigger_on='mousemove|click',
axis_pointer_type='cross',
formatter=JsCode(
"""
function(params) {
var z = """ + str(biaoqian_date) + """;
var index = params.dataIndex;
return
'总量: ' + params.data[1] +
'<br>汉堡: ' + z[index][3] +
'<br>翅中: ' + z[index][0]+
'<br>薯条: ' + z[index][1] +
'<br>可乐: ' + z[index][2] +
'<br>鸡腿: ' + z[index][4] +
'<br>披萨: ' + z[index][5];
}
"""
)
),
)
l.set_global_opts(
title_opts=opts.TitleOpts(
title="每日情况变化表", subtitle="数据来自***", pos_left="center"
),
xaxis_opts=opts.AxisOpts(name="m",
type_="value",
boundary_gap=False,
axisline_opts=opts.AxisLineOpts(is_on_zero=True),
),
yaxis_opts=opts.AxisOpts(name="总量(单)"),
axispointer_opts=opts.AxisPointerOpts(
is_show=True, link=[{"xAxisIndex": "all"}]
),
datazoom_opts=[
opts.DataZoomOpts(
is_show=True,
is_realtime=True,
range_start=10,
range_end=50,
xaxis_index=[0, 1],
)
],
legend_opts=opts.LegendOpts(pos_left="left"),
toolbox_opts=opts.ToolboxOpts(
is_show=True,
feature={
"dataZoom": {"yAxisIndex": "none"},
"restore": {},
"saveAsImage": {},
},
),
)
l.render("折线图.html")
guandaomaishen_paint()
制作不易,也是查了好多资料,自己实践了很长时间总结出来的,希望能帮助到大家,大家多多点赞。