pyecharts 柱状图自定义tooltip提示框,以及数据传入办法

本文围绕pyecharts柱状图展开,需求是鼠标移到柱状图上显示对应文本信息。查阅了echarts用法、pyecharts中JsCode简介等资料获取灵感。介绍了文本数据传入办法,即通过Y轴传入,与数值数据以字典形式放列表再传入y_axis,还说明了利用formatter和JsCode在提示框显示文本数据。

pyecharts 柱状图自定义tooltip提示框,以及数据传入办法

我的需求

鼠标移动到柱状图上时,显示对应的文本信息。
最终效果(fake_data)如下图:
鼠标触碰到柱子显示文本,图中显示的“小刚"

查阅的资料

1,echarts中的用法
2,pyecharts中JsCode简介
3,pyeachrts中散点图自定义提示框办法

感谢以上三位博主,虽然没有直接解决我的问题,但是受到启发有了灵感~

代码

from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode
from pyecharts import options as opts
from pyecharts.globals import ThemeType


js_code_str= '''
            function(params){
            return params.data.text;
            }
            '''

bar = Bar(init_opts= opts.InitOpts(page_title= 'DTC Chart',theme= ThemeType.SHINE,))
x_axis = ['苹果','香蕉','橙子']
bar.add_xaxis(x_axis)
y_axis = [{'value':4,'text':'小明'},{'value':5,'text':'小刚'},{'value':5,'text':'小红'}]
bar.add_yaxis('',y_axis=y_axis)
bar.set_global_opts(title_opts=opts.TitleOpts(title='水果', subtitle='All'),
                    tooltip_opts=opts.TooltipOpts(formatter=JsCode(js_code_str)),
                    xaxis_opts=opts.AxisOpts(name=''),
                    yaxis_opts=opts.AxisOpts(name='数量',type_='value')
                    )
bar.render()

文本数据传入代码说明

y_axis = [{'value':4,'text':'小明'},{'value':5,'text':'小刚'},{'value':5,'text':'小红'}]

1,需要提示框显示的文本数据通过Y轴传入。文本数据与Y轴的数值数据以字典的形式放入列表中,再传入y_axis
2,y轴数值数据的 key 必须是‘value’。我尝试下来是这样,猜测在源码中是通过字符串‘value’来获取y轴的数值数据。欢迎指正~

提示框显示说明

js_code_str= '''
            function(params){
            return params.data.text;
            }
            '''
tooltip_opts=opts.TooltipOpts(formatter=JsCode(js_code_str))

利用formatter 以及JsCode获取到文本数据并在提示框中显示。

这一部分请看:
pyecharts中JsCode简介

End

欢迎留言,讨论&指正~

评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值