返回顶部
首页 > 资讯 > 后端开发 > Python >pyecharts的Tab和Legend布局详情
  • 124
分享到

pyecharts的Tab和Legend布局详情

2024-04-02 19:04:59 124人浏览 八月长安

Python 官方文档:入门教程 => 点击学习

摘要

目录一、布局设计思路二、操作实践导言: 读者朋友有时候是不是和我有一样的困惑,用惯了matplotlib和seaborn绘制各种各样的小图供自己观察的时候还算得心应手,但是一旦到了要

导言:

读者朋友有时候是不是和我有一样的困惑,用惯了matplotlibseaborn绘制各种各样的小图供自己观察的时候还算得心应手,但是一旦到了要持续的大批量绘制一些图表供非数据分析人员长久观察的时候又觉得吃力,那么有没有一款第三方python模块能够帮我们解决这种困惑呢?答案是肯定的,这就要推荐我们今天的主角——pyecharts。

pyecharts是百度开源的一款第三方绘图模块,结合的Python语言的简易性和Echarts的强大绘图特性,可以用python对其调用,输出交互性好,精美乖巧且符合审美的图表,而且还可以轻松的集成到flaskDjango 等主流 WEB 框架,方便自己和别人长久可持续观看。

一、布局设计思路

抛开数据谈布局简直有点天荒夜谈,数据长什么样决定了图表的花容月貌,熟稔自己手里的数据才能知自知彼绘制出优美的图表出来,首先看一下我们样例数据长什么样。

上图是我们的数据表,主要包含的字段有id, flight_date,carGo_type,cargo_weight以及cargo_rate, 其中id类似身份识别号,数量大约有400个左右,一个id就是一个主体,flight_date是记录id的时间,单位是日期,cargo_type表示主体承载的货物类别主要有"A;B", "C;D;E"和 "M"三大类,而cargo_weight和cargo_rate分别表示货物的重量和价格,这种类型的数据是不是像极了我们平时遇到的 各个门店里各类商品每天的销售数据。

知道了数据长什么样子后,我们就可以在草稿纸上画一画,比如我希望把cargo_weight和cargo_rate两者随着时间的变化而展现出的优美走位绘制出来,自然而然,flight_date就作为时间线索横梗在下面,cargo_weight和cargo_rate画在横坐标之上的两位舞者,为了区分,可以用柱状图绘制cargo_weight, 用曲线绘制cargo_rate,犹如蛟龙在群峰之间蜿蜒向前,为了区分刻画cargo_weight和cargo_rate两者之间不同数量级,我还需要引入主纵坐标和副纵坐标,用主坐标刻画cargo_weight的度量,用副坐标刻画cargo_rate的度量,有了这些基本要素之后,接下来问题的关键是怎么把id和cargo_type各放恰当的位置?这的确需要动些脑子,考虑到id和cargo_type两者的数量,可以把cargo_type作为Tab标签,而id作为Legend图例,可以让观察者每选定一个主体就能看到这个主体不同cargo_type的历史上cargo_weight和cargo_rate走势情况,而且还可以赋予每一个cargo_type一个主体配置。

二、操作实践

有了蓝图便胸有成竹,下面便是撰写代码实现的时候了

import pandas as pd
import pyMysql
import pyecharts
from pyecharts import options as opts
from pyecharts.charts import Bar, Grid, Line, Tab
from pyecharts.globals import ThemeType

con = pymysql.Connect(host='000.00.0.00', user ='***', passwd='******', database='***')
r_sql = "select id, cargo_type, flight_date, cargo_weight, cargo_rate from adm.adm_ifs_rate_order_price order by flight_date asc, voyage desc" #航班订单数据
f_sql = "select concat(flight_no, '-', orac_3airport, '-', dstc_3airport) as id from ods.dm_flt_info where flight_date = date_sub(curdate(), INTERVAL -1 day) order by id asc" #次日航班计划
raw_data = pd.read_sql(con = con, sql = r_sql) #读取运单原数据
flight_id = pd.read_sql(con = con, sql = f_sql )['id'] #读取航班计划
con.close() #关闭链接

flight_cargo = raw_data.query("id == @flight_id[0]") #筛选具体航班

cargo_type = ['A;B', 'C;D;E', 'M']
cargo_ab = flight_cargo.query("cargo_type == @cargo_type[0] ")[["flight_date",  "cargo_weight",  "cargo_rate"]] #筛选某个货物类别
cargo_cde = flight_cargo.query("cargo_type == @cargo_type[1] ")[["flight_date",  "cargo_weight",  "cargo_rate"]] #筛选某个货物类别
cargo_m = flight_cargo.query("cargo_type == @cargo_type[2] ")[["flight_date",  "cargo_weight",  "cargo_rate"]] #筛选某个货物类别

def ab_() -> Grid:
    bar = (
        Bar()
        .add_xaxis(cargo_ab.flight_date.values.tolist())
        .add_yaxis("运量", cargo_ab.cargo_weight.values.tolist(), yaxis_index=0)

        .set_series_opts(
            itemstyle_opts=opts.ItemStyleOpts(
                opacity=0.5,
            )
         )
         .extend_axis(
            yaxis=opts.AxisOpts(
                type_="value",
                name="运价",
                position="right",
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(color="#675bba")
                ),
                splitline_opts=opts.SplitLineOpts(
                    is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=0.5)
                ),
            )
        )

        .set_global_opts(
            title_opts = opts.TitleOpts(title = flight_id[0]),
            yaxis_opts=opts.AxisOpts(name="运量"),
            datazoom_opts = opts.DataZoomOpts(),

        )
    )


    line = (
        Line()
        .add_xaxis(cargo_ab.flight_date.values.tolist())
        .add_yaxis("运价", cargo_ab.cargo_rate.values.tolist(),yaxis_index=1
        )
    )

    bar.overlap(line)
    return Grid().add(
        bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True
    )


def cde_() -> Grid:
    bar = (
        Bar()
        .add_xaxis(cargo_cde.flight_date.values.tolist())
        .add_yaxis("运量", cargo_cde.cargo_weight.values.tolist(), yaxis_index=0)

        .set_series_opts(
            itemstyle_opts=opts.ItemStyleOpts(
                opacity=0.5,
            )
         )
         .extend_axis(
            yaxis=opts.AxisOpts(
                type_="value",
                name="运价",
                position="right",
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(color="#675bba")
                ),
                splitline_opts=opts.SplitLineOpts(
                    is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=0.5)
                ),
            )
        )

        .set_global_opts(
            title_opts=opts.TitleOpts(title=flight_id[0]),
            yaxis_opts=opts.AxisOpts(name="运量"),
            datazoom_opts=opts.DataZoomOpts(),
        )
    )


    line = (
        Line()
        .add_xaxis(cargo_cde.flight_date.values.tolist())
        .add_yaxis("运价", cargo_cde.cargo_rate.values.tolist(),yaxis_index=1
        )
    )

    bar.overlap(line)
    return Grid().add(
        bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True
    )

def m_() -> Grid:
    bar = (
        Bar()
        .add_xaxis(cargo_m.flight_date.values.tolist())
        .add_yaxis("运量", cargo_m.cargo_weight.values.tolist(), yaxis_index=0)

        .set_series_opts(
            itemstyle_opts=opts.ItemStyleOpts(
                opacity=0.5,
            )
         )
         .extend_axis(
            yaxis=opts.AxisOpts(
                type_="value",
                name="运价",
                position="right",
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(color="#675bba")
                ),
                splitline_opts=opts.SplitLineOpts(
                    is_show=True, linestyle_opts=opts.LineStyleOpts(opacity=0.5)
                ),
            )
        )

        .set_global_opts(
            title_opts=opts.TitleOpts(title=flight_id[6]),
            yaxis_opts=opts.AxisOpts(name="运量"),
            datazoom_opts=opts.DataZoomOpts(),
        )
    )


    line = (
        Line()
        .add_xaxis(cargo_m.flight_date.values.tolist())
        .add_yaxis("运价", cargo_m.cargo_rate.values.tolist(),yaxis_index=1
        )
    )

    bar.overlap(line)
    return Grid().add(
        bar, opts.GridOpts(pos_left="5%", pos_right="20%"), is_control_axis_index=True
    )


tab  = Tab()
tab.add(ab_(), "A;B")
tab.add(cde_(), "C;D;E")
tab.add(m_(), "M")
tab.render_notebook()

下面结合效果图对代码做一下简单的解析,整个代码可以分3大块,第一块是连接数据库读取原数据并将数据一分为三,每一份数据为一个独立的货物类别;第二块是各用一个函数实现某类别货物cargo_weight和cargo_rate展示,而每一个函数作为Tab的参数进行调用,这样,每一个类别形成一个Tab,每一个Tab下面刚好有这个id的历史cargo_weight和cargo_rate走势情况,这样做样做的好处,用Tab就可以划分了cargo_type中"A;B", "C;D;E"和 "M"三个类别;最后调用render_notebook函数把所有Tab渲染出来。

结论:

效果图可以看到如果只要画一个id的各类货物的cargo_weight和cargo_rate走势的话,效果还是不错的,然而我们的id数目高达400个,上述方法很难奏效,我们希望让id去替换上图的运量和运价两个图例,形成id簇的图例,最好还可以对图例进行选择或者翻页

到此这篇关于pyecharts的Tab和Legend布局详情的文章就介绍到这了,更多相关Tab和Legend布局内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: pyecharts的Tab和Legend布局详情

本文链接: https://lsjlt.com/news/141505.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • pyecharts的Tab和Legend布局详情
    目录一、布局设计思路二、操作实践导言: 读者朋友有时候是不是和我有一样的困惑,用惯了matplotlib和seaborn绘制各种各样的小图供自己观察的时候还算得心应手,但是一旦到了要...
    99+
    2024-04-02
  • CSS实现Tab布局的方法
    小编给大家分享一下CSS实现Tab布局的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、布局方式1、内容与tab分离<div class=&...
    99+
    2023-06-08
  • Python可视化Tkinter进阶grid布局详情
    目录1、grid布局1.1、pack布局1.2、grid布局2、简易Base64装换工具制作2.1、源码分析1、grid布局 Tkinter提供了两中布局方式pack只能逐行添加gr...
    99+
    2024-04-02
  • Android AbsoluteLayout和RelativeLayout布局详解
    Android 线性布局: AbsoluteLayout布局和RelativeLayout布局。  1、绝对布局 AbsoluteLayout 绝对定位Absolu...
    99+
    2022-06-06
    relativelayout Android
  • Android ListView添加头布局和脚布局实例详解
    Android ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考; 如果我们当前的页面有多个接口、多种布局的话,我们一般的...
    99+
    2022-06-06
    布局 listview Android
  • C++解析特殊符号tab和换行符号详情
    目录前言: 我们经常会遇到一些Linux内核信息需要,比如一个wifi数据,中间是用tab键盘隔开的,然后每一行用换行符进行区分,如下所示的数据 第一位置是:wifi名称 第二个位...
    99+
    2024-04-02
  • Nuxt3 布局layouts和NuxtLayout的使用详解
    Nuxt3是基于Vue3的一个开发框架,基于服务器端渲染SSR,可以更加方便的用于Vue的SEO优化。 用Nuxt3 SSR模式开发出来的网站,渲染和运行速度非常快,性能也非常高,而...
    99+
    2023-05-18
    Nuxt3 布局layouts和NuxtLayout Nuxt3 layouts使用
  • 如何使用HTML和CSS创建一个响应式商品详情布局
    在当今移动互联网的时代,响应式网页设计已经成为了现代网页设计的标配。而商品详情页作为电商网站中重要的页面之一,其响应式设计显得尤为重要。本文将介绍如何使用HTML和CSS创建一个响应式商品详情布局,并附上具体的代码示例。HTML 结构首先,...
    99+
    2023-10-21
    响应式 CSS html
  • CSS两列布局和三列布局的用法
    这篇文章主要介绍了CSS两列布局和三列布局的用法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。两列布局左列定宽,右列自适应float + margin 布局html 代码&l...
    99+
    2023-06-08
  • Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)
    Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结。目前写了: 1、传统的ViewPager实现 2、FragmentManager+Fr...
    99+
    2022-06-06
    viewpager tab fragment Android
  • Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout实例详解
    本文实例分析了Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout。分享给大家供大家参考,具体如下:  一、绝对布局Abso...
    99+
    2022-06-06
    程之 relativelayout Android
  • CSS 相对布局属性详解:position 和 relative
    CSS 相对布局属性详解:position 和 relative在前端开发中,布局常常是开发者需要面对的问题,为了更好地控制元素在页面中的位置,CSS 提供了多种布局方式。其中,相对布局是一种非常常用的布局方式,通过使用 position ...
    99+
    2023-10-26
    Grid Float FLEXBOX
  • 如何理解Div+CSS布局中的页面布局和规划
    本篇文章为大家展示了如何理解Div+CSS布局中的页面布局和规划,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Div+CSS布局入门 在网页制作中,有许多...
    99+
    2024-04-02
  • css中双飞翼布局和圣杯布局的示例分析
    这篇文章主要为大家展示了“css中双飞翼布局和圣杯布局的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中双飞翼布局和圣杯布局的示例分析”这篇文章吧...
    99+
    2024-04-02
  • CSS 弹性布局属性详解:flex 和 justify-content
    CSS 弹性布局属性详解:flex 和 justify-content在现代的网页设计中,弹性布局(flexbox)成为了一种非常有用的布局方式。弹性布局允许我们轻松地创建自适应且灵活的布局,以适应各种屏幕尺寸和设备类型。两个核心属性 fl...
    99+
    2023-10-24
    CSS 弹性布局 flex
  • CSS 环形布局属性详解:border-radius 和 transform
    一、简介在网页设计中,环形布局常常用于创建圆形的元素,如按钮、头像等。实现环形布局的两个关键CSS属性是border-radius和transform。本文将详细介绍如何使用border-radius和transform属性来创建环形布局,...
    99+
    2023-10-21
    transform border-radius 关键词: CSS 环形布局
  • 详解Java对象的内存布局
    目录前言对象内存构成对象头实例数据对齐数据结尾前言 今天来讲些抽象的东西 -- 对象头,因为我在学习的过程中发现很多地方都关联到了对象头的知识点,例如JDK中的 synchroniz...
    99+
    2024-04-02
  • 一文详解CSS3中的Flex布局
    简介什么是Flex布局Flex是Flexible Box 的缩写,也称为弹性盒子布局。 Flex布局组成:flex容器(flex container)flex项(flex items)主轴(main axis)交叉轴(cross axis)...
    99+
    2022-11-22
    css CSS3 flex
  • JetpackCompose布局的使用详细介绍
    目录一.标准布局组件二.修饰符三.滑动组件1.ScrollableRow和ScrollableColumn2.LazyRowFor和LazyColumnFor一.标准布局组件 Com...
    99+
    2024-04-02
  • Flex移动布局中单行和双行布局的区别有哪些
    小编给大家分享一下Flex移动布局中单行和双行布局的区别有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!这里是单行布局 使用ul>li 来布局<ul class="local-nav&q...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作