第一章 tooltips自定义

最新推荐文章于 2024-02-20 17:39:02 发布

ssscsd

最新推荐文章于 2024-02-20 17:39:02 发布

阅读量816

点赞数 1

分类专栏： pyecharts 文章标签： python 数据可视化可视化

本文链接：https://blog.csdn.net/ssscsd/article/details/117636396

版权

pyecharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Pyecharts中自定义tooltips的排序功能，以及如何将小圆点形状改为长方形。通过实例演示了设置formatter函数和调整tooltip样式，适合学习者快速上手定制echarts图表的提示信息。

摘要由CSDN通过智能技术生成

pyecharts学习记录

第一章 tooltips自定义
第二章多线条时，图例颜色和线条颜色不对应的问题

前言

自定义tooltips：

	多条曲线图时tootips排序；
	小圆点改为长方形。

说明：pyecharts版本1.7.1和1.8.1都可以

一、基本代码

1.基本代码

import pyecharts.options as opts
from pyecharts.charts import Line,Bar,Tab
from pyecharts.globals import ThemeType,CurrentConfig
from pyecharts.commons.utils import JsCode

line=(
	Line(
		init_opts=opts.InitOpts
			(
			width=f"{para_width}px",
			height=f"{para_height}px",
			theme=ThemeType.INFOGRAPHIC
			)
		)
	.add_xaxis(xaxis_data=xaxis_data)
	)

colors['#c23531','#2f4554','#61a0a8','#d48265','#749f83','#1d953f','#bda29a','#6e7074','#546570','#c4ccd3','#f05b72',  '#ef5b9c','#f47920','#905a3d','#fab27b','#2a5caa','#444693','#726930','#b2d235','#6d8346','#ac6767','#ca8622','#6950a1','#918597']
line.set_colors(colors=colors) # 加这句，线颜色和图例对应起来了

line.add_yaxis(
            series_name=series_name, 
            y_axis=y_data, # 系列数据
            linestyle_opts=linestyle_opts,
            areastyle_opts=areastyle_opts
        )

二、tooltips排序

1.tooltips排序

formatter=JsCode("""
    function(params){
        var tabHtml = '<span style="mso-tab-count:1">&nbsp;&nbsp;&nbsp;&nbsp;</span>';
        var tabHtml = '&emsp;';
        
        let newParams = [];
        let tooltipString = [];
        newParams = [...params];
        newParams.sort((a,b) => {return b.value[1]-a.value[1]});
        newParams.forEach((p) => {
            var my_marker = '<span style="display:inline-block;margin-right:5px;border-radius:4px;width:40px;height:15px;background-color:'+ p.color + ';"></span>';
            const cont =  my_marker + tabHtml + p.value[1] + tabHtml + p.seriesName + '<br/>';
            tooltipString.push(cont);
        });
        return tooltipString.join('');
    }
    """)

设定自定义的tooltips，代码如下

line.set_global_opts
	(
	tooltip_opts=opts.TooltipOpts
		(
		formatter=formatter,
		trigger="axis",trigger_on='click',
		axis_pointer_type="cross"
		)
	)
#1.8.1版本有始终显示参数，1.7.1没有始终显示参数,is_always_show_content=True,position=['29%', '8%']

三、自定义小圆点形状

1.自定义小圆点形状

JsCode代码如下：

var my_marker = '<span style="display:inline-block;margin-right:5px;border-radius:4px;width:40px;height:15px;background-color:'+ p.color + ';"></span>';
const cont =  my_marker + tabHtml + p.value[1] + tabHtml + p.seriesName + '<br/>';

总结

以上就是今天要讲的内容。

参考资料

from pyecharts.commons.utils import JsCode

.add(   
        type_="effectScatter",
        series_name="",         
        data_pair=data,        
        symbol_size=10,
        effect_opts=opts.EffectOpts(),
        label_opts=opts.LabelOpts(
            position="top",
            is_show=True,   #is_show是否显示标签,点上面的内容
            formatter=JsCode(                  #formatter为标签内容格式器{a}：系列名;{b}：数据名;{c}：数值数组也可以是回调函数    
                    """function(params) {
                    if ('value' in params.data) {
                        return params.data.value[2];
                    }
                }"""
                ),#显示数据，可以去掉经纬度只显示数值return params.data.value[2] + ': ' + params.data.value[0]+': ' + params.data.value[1];
            ), 
        itemstyle_opts=opts.ItemStyleOpts(),
        is_selected=True,  #选中图例
    )

echarts 图表tooltip数据实现降序排列

https://blog.csdn.net/weixin_36270908/article/details/102854801

tooltip: {
	trigger: 'axis',
	formatter: function(params){
		let newParams = [];
		let tooltipString = [];
		newParams = [...params];
		newParams.sort((a,b) => {return b.value - a.value});
		newParams.forEach((p) => {
			const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>';
			tooltipString.push(cont);
		});
		return tooltipString.join('');
	}
}