pyecharts源码解读(16)图表类包charts之组合图表: 顺序多图Page

当前pyecharts的版本为1.9.0。

概述

pyecharts/charts/composite_charts/包中的四个模块分别定义了组合图表类,其中pyecharts/charts/composite_charts/page.py模块只定义了顺序类Page

Page类继承自图表基类CompositeMixin,作用为在一个容器中顺序显示多个图表。输出的HTML结构如下:
在这里插入图片描述
Page类的签名为class Page(page_title: str = "Awesome-pyecharts", js_host: str = "", interval: int = 1, layout: Union[PageLayoutOpts, dict] = PageLayoutOpts())

Page类的构造方法参数如下:

  • js_host:JavaScript库的URL。字符串,默认值为""
  • page_title:HTML页面标题。字符串,默认值为"Awesome-pyecharts"
  • interval:图表间隔(<br>标签个数)。整数,默认值为1
  • layout:布局配置。PageLayoutOpts对象或字典,默认值为PageLayoutOpts()Page类支持三种布局模式:默认布局、SimplePageLayout布局、DraggablePageLayout布局。

Page类的类变量如下:

  • SimplePageLayout:简单布局模式。值为 PageLayoutOpts( justify_content="center", display="flex", flex_wrap="wrap")
  • DraggablePageLayout :可拖拽模式。值为PageLayoutOpts()

Page类的属性如下:

  • js_host:JavaScript库的URL。字符串,默认值为全局变量CurrentConfig.ONLINE_HOST。属性值为构造方法参数js_host与全局变量CurrentConfig.ONLINE_HOST进行或操作的结果。
  • page_title:HTML页面标题。字符串,默认值为全局变量CurrentConfig.PAGE_TITLE
  • page_interval:每个图表之间的间隔。值为构造方法参数interval值。整数。即在HTML文档中插入的<br/>标签个数。
  • layout :布局配置字符串。
  • download_button:是否显示下载按钮。布尔值。默认值为False
  • js_functions:自定义JavaScript语句。类型为OrderedSet对象。默认值为OrderedSet()
  • js_dependencies:定义JavaScript依赖库。类型为OrderedSet对象。默认值为OrderedSet("echarts")
  • _charts:容器中图表实例列表。类型为列表。默认值为[]

Page类的方法如下:

  • add(*chart):将图表类实例添加页面中。方法可接收任意个图表类实例。
  • render:调用renderengine模块中的render函数渲染HTML文档。默认渲染模板为"simple_page.html"
  • render_embed:调用renderengine模块中的render_embed函数输出HTML字符串。默认渲染模板为"simple_page.html"
  • render_notebook:调用renderengine模块中的render_notebook函数将输出嵌入到notebook中。默认渲染模板为 "nb_jupyter_notebook_page.html""nb_jupyter_lab_page.html"

简易选项卡Page案例

from pyecharts.charts import Line, Page

a = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
b1 = [5, 20, 36, 10, 75, 90]
b2 = [7, 25, 31, 14, 65, 100]

line1 = Line()
line1.add_xaxis(a)
line1.add_yaxis("", b1)

line2 = Line()
line2.add_xaxis(a)
line2.add_yaxis("", b2)

page = Page()
page.add(line1,line2)
page.render()

在这里插入图片描述

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
作者Hankkin,PageLayoutDemo,一款简单的 page 切换 空布局、错误布局、加载布局,支持一键配置、定义,不需要 xml 编写该功能是支持单独为某个布局设置状态改变的,比如很多同学提到的我一个 listview 的数据没有获取到,fun initPage(targetView: Any),这个 targetView 你只需要设置成你的 listview 或者裹你 listview 的 parent 布局就 OK 了,具体原理可以看下面的代码解析啊,遍历获取索引,然后记录索引值....项目中我们经常会用到的加载数据,加载完数据后显示内容,如果没有数据显示一个空白页,这是如果网络错误了显示一个网络错误页,自定义一个 PageLayout。绪论Android 中经常使用一个空白页和网络错误页用来提高用户体验,给用户一个较好的感官,如果获取到的数据为空,那么会显示一个空白数据页,如果在获取数据的过程中网络错误了,会显示一个网络异常页,像最近比较火的某东这样,见下。网上也有一些开的组件,大部分都是自定义继承某个布局在 xml 中让其作为跟布局,然后将自己的内容布局添加进去,效果也都不错,但是个人总觉得稍微有些麻烦,不是那么灵活,n 多个 xml 布局都去定义,写的心烦,所以有了今天的主角。 思考实现的思路实际上是和上面说的一样,只不过换了一种方式,我们手动获取到 contentView,将它从 DecorView 中移除,然后交给 PageLayout 取管理。当时考虑的时候就是不想在每个 xml 中去写页面切换的布局,那么我们可不可以用 Java 代码去控制?带着下面几个问题一起来看一下。1.自定义一个布局让其作为跟布局2.提供切换加载 loading、空白页 empty、错误页 errror、内容页 content功能3.怎么让其取管理上边的四个页面?4.contentView 怎么添加?5.如果我想切换的跟布局不是个 Activity 或者 Fragment 怎么办?6.因为切换页面状态的功能一般都是一个 APP 统一的,那么可不可以一键配置呢?实现1.代码设计首先我们定义 PageLayout 继承 FrameLayout 或者 LinearLayou 或者其他的布局都可以,然后我们需要提供切换四个布局的功能,当然如果支持自定义就更好了,还有状态布局里面的一些属性,还方便一键配置,所以最后采用了 Builder 模式来创建,使用方式就和 Android 里面的AlertDialog一样,通过 Builder 去构建一个 PageLayout。最后的样子是长这样的:方法注释showLoading()显示 loadingshowError()显示错误布局showEmpty()显示空布局hide()显示内容布局BuildersetLoading()setLoadingText()setError()setDefaultLoadingBlinkText()setEmpty()setLoadingTextColor()setDefaultEmptyText()setDefaultLoadingBlinkColor()setDefaultEmptyTextColor()setDefaultErrorText()setDefaultErrorTextColor()setEmptyDrawable()setErrorDrawable()默认样式PageLayout.Builder(this)                 .initPage(ll_default)                 .setOnRetryListener(object : PageLayout.OnRetryClickListener{                     override fun onRetry() {                         loadData()                     }                 })                 .create()自定义样式PageLayout.Builder(this)                 .initPage(ll_demo)                 .setLoading(R.layout.layout_loading_demo)                 .setEmpty(R.layout.layout_empty_demo,R.id.tv_page_empty_demo)                 .setError(R.layout.layout_error_demo,R.id

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值